:root { --ink:#1b3327; --muted:#668073; --accent:#437e56; --lime:#d9f588; --pale:#efffd5; --line:rgba(255,255,255,.58); --glass:rgba(237,255,224,.42); --glass-strong:rgba(246,255,238,.63); --shadow:0 18px 55px rgba(52,93,61,.13), inset 0 1px 0 rgba(255,255,255,.78); } * { box-sizing:border-box; } body { margin:0; min-height:100vh; overflow-x:hidden; color:var(--ink); background:radial-gradient(circle at 15% 20%,#f3ffd5 0,transparent 23%), radial-gradient(circle at 87% 80%,#ceffb3 0,transparent 25%), linear-gradient(135deg,#bcecae,#d9ffd5 46%,#f1ffdc); font-family:Manrope,Arial,sans-serif; } body.gray { --ink:#29302c; --muted:#707873; --accent:#62736b; --lime:#eef1e4; --pale:#f4f7ef; --glass:rgba(248,250,247,.46); --glass-strong:rgba(255,255,255,.64); background:radial-gradient(circle at 15% 20%,#fff 0,transparent 24%), radial-gradient(circle at 88% 80%,#dfe6e0 0,transparent 27%),linear-gradient(135deg,#d6ddd7,#f1f2ed 45%,#cbd5cf); } button,input,textarea { font:inherit; } button { cursor:pointer; border:0; color:inherit; } .screen { display:none; min-height:100vh; position:relative; z-index:1; } .screen.is-active { display:flex; } .glass-card { background:var(--glass); border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter:blur(25px) saturate(130%); -webkit-backdrop-filter:blur(25px) saturate(130%); } .backdrop-orb { position:fixed; border-radius:50%; filter:blur(1px); pointer-events:none; z-index:0; }.orb-one { width:290px;height:290px;top:-75px;right:8%;background:rgba(209,249,128,.55);}.orb-two { width:430px;height:430px;bottom:-160px;left:-110px;background:rgba(255,255,237,.55);}.orb-three {width:130px;height:130px;top:38%;right:3%;background:rgba(116,203,141,.18);}.film-grain { position:fixed;inset:0;pointer-events:none;opacity:.19;z-index:3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");mix-blend-mode:soft-light; } .auth-screen { align-items:center;justify-content:center; flex-direction:column; padding:35px 24px; }.auth-topline { position:absolute;top:27px;left:38px;right:38px;display:flex;justify-content:space-between;align-items:center;font:11px 'DM Mono';letter-spacing:.08em;text-transform:uppercase;color:var(--muted); }.brand-mark { font:700 24px 'Playfair Display';color:var(--accent);letter-spacing:-.1em; }.auth-card { width:min(610px,100%);min-height:565px;padding:63px 70px 38px;border-radius:45px 45px 110px 45px;position:relative;text-align:center;overflow:hidden; }.auth-card:after { content:'';position:absolute;inset:10px;border-radius:37px 37px 104px 37px;border:1px solid rgba(255,255,255,.34);pointer-events:none; }.sparkle { width:45px;height:45px;border-radius:50%;display:grid;place-items:center;margin:0 auto 15px;background:var(--lime);box-shadow:0 8px 20px rgba(104,147,58,.16);font-size:20px; }.eyebrow { margin:0 0 12px;font:10px 'DM Mono';letter-spacing:.16em;text-transform:uppercase;color:var(--muted); }.auth-card h1,.setup-copy h2 { font:600 clamp(38px,5vw,56px)/.95 'Playfair Display';letter-spacing:-.055em;margin:0; }.auth-card h1 em,.setup-copy em,.profile-placeholder em,.friends-empty em,.music-heading em,.invite-modal h3 em { color:var(--accent);font-weight:600; }.intro { max-width:400px;margin:19px auto 30px;line-height:1.7;font-size:13px;color:var(--muted); }.email-form { text-align:left;position:relative;z-index:1; }.email-form label,.profile-form>label,.invite-modal label { display:block;font:500 11px 'DM Mono';letter-spacing:.06em;color:var(--muted); }.field-shell { display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.59);border:1px solid rgba(255,255,255,.8);margin-top:8px;border-radius:28px;padding:5px 6px 5px 17px;box-shadow:inset 0 2px 4px rgba(74,117,68,.06); }.field-icon { color:var(--accent);font-weight:700; }.field-shell input { min-width:0;flex:1;border:0;outline:0;background:transparent;padding:9px 0;font-size:13px;color:var(--ink); }.field-shell input::placeholder,textarea::placeholder { color:#91a591; }.round-button { width:40px;height:40px;border-radius:50%;background:var(--accent);color:white;font-size:22px;line-height:1;transition:transform .25s; }.round-button:hover { transform:scale(1.08) rotate(-10deg); }.form-note { margin:12px 3px;color:var(--muted);font-size:10px; }.auth-orbits { display:flex;align-items:center;justify-content:center;gap:7px;margin:37px 0 0; }.auth-orbits span { padding:6px 10px;border:1px solid rgba(93,141,81,.15);border-radius:50px;background:rgba(255,255,255,.27);font-size:9px;letter-spacing:.06em; }.auth-orbits span:nth-child(2){transform:translateY(8px)}.auth-orbits span:nth-child(3){transform:translateY(-3px)}.legal { position:absolute;bottom:19px;font-size:10px;color:var(--muted); } .setup-screen { padding:28px 6vw 55px; flex-direction:column; }.setup-header { height:62px;display:flex;justify-content:space-between;align-items:center; }.wordmark { color:var(--ink);text-decoration:none;font:700 21px 'Playfair Display';letter-spacing:-.07em; }.wordmark span { color:var(--accent); }.setup-header p { margin:0;font:10px 'DM Mono';letter-spacing:.08em;text-transform:uppercase;color:var(--muted); }.setup-header b { color:var(--accent); }.setup-layout { width:min(1010px,100%);margin:auto;display:grid;grid-template-columns:.88fr 1fr;gap:90px;align-items:center; }.setup-copy>p:not(.eyebrow){max-width:325px;line-height:1.7;color:var(--muted);font-size:14px;margin-top:26px}.progress-line { width:260px;height:6px;border-radius:10px;background:rgba(255,255,255,.4);margin-top:45px;overflow:hidden; }.progress-line span { display:block;width:100%;height:100%;border-radius:inherit;background:var(--accent); }.profile-form { padding:30px;border-radius:32px; }.avatar-upload { cursor:pointer;display:flex;align-items:center;gap:14px;border-bottom:1px solid rgba(99,138,99,.15);padding-bottom:24px;margin-bottom:22px; }.avatar-upload input { display:none; }.avatar-preview,.mini-avatar,.large-avatar { flex:0 0 auto;overflow:hidden;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#efffd6,#bde596);border:1px solid rgba(255,255,255,.82);box-shadow:0 4px 12px rgba(68,110,61,.1);background-size:cover;background-position:center;color:var(--accent); }.avatar-preview{width:62px;height:62px}.avatar-plus{font-size:25px}.avatar-upload b{display:block;font-size:13px}.avatar-upload small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.avatar-upload i{margin-left:auto;font:10px 'DM Mono';font-style:normal;text-transform:uppercase;color:var(--accent);padding:7px 10px;background:rgba(255,255,255,.35);border-radius:30px}.name-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.profile-form label{margin-bottom:18px}.profile-form input,.profile-form textarea,.invite-modal input{display:block;width:100%;margin-top:7px;border:0;border-bottom:1px solid rgba(78,125,84,.27);outline:0;background:transparent;padding:7px 0;font-size:13px;color:var(--ink);resize:none}.profile-form textarea{height:50px;line-height:1.5}.optional{float:right;font-size:9px;opacity:.65}.choice-area>span{font:500 11px 'DM Mono';letter-spacing:.06em;color:var(--muted)}.mood-pills{display:flex;gap:7px;margin:10px 0 25px}.mood-pill{padding:7px 9px;border-radius:30px;background:rgba(255,255,255,.28);font-size:10px;color:var(--muted);border:1px solid transparent}.mood-pill.selected{background:var(--pale);border-color:rgba(74,128,77,.2);color:var(--ink)}.primary-button{display:flex;align-items:center;justify-content:space-between;gap:22px;width:100%;padding:13px 18px;border-radius:30px;background:var(--accent);color:#fff;font-size:12px;box-shadow:0 8px 20px rgba(43,99,55,.18);transition:transform .2s,box-shadow .2s}.primary-button:hover{transform:translateY(-2px);box-shadow:0 12px 25px rgba(43,99,55,.25)}.primary-button span:last-child{font-size:19px;line-height:11px}.compact{width:auto;padding:11px 16px} .app-screen { min-height:100vh;padding:20px;gap:20px; }.sidebar { width:235px;min-height:calc(100vh - 40px);padding:28px 18px 20px;border-radius:28px;display:flex;flex-direction:column;position:sticky;top:20px;align-self:flex-start; }.mini-profile { display:flex;gap:10px;align-items:center;padding:25px 8px 20px;border-bottom:1px solid rgba(91,138,93,.13); }.mini-avatar{width:31px;height:31px;font-size:10px}.initials{font-weight:800;text-transform:uppercase}.mini-profile b{font-size:11px;display:block}.mini-profile small{font:9px 'DM Mono';color:var(--muted)}.main-nav{padding:17px 0;display:grid;gap:5px}.nav-item{width:100%;display:flex;align-items:center;gap:10px;padding:10px;border-radius:13px;background:transparent;text-align:left;font-size:12px;color:var(--muted);transition:.2s}.nav-item>span{width:19px;text-align:center;color:var(--accent);font-size:18px}.nav-item i{margin-left:auto;font:8px 'DM Mono';font-style:normal;color:#9bae9d;opacity:0}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.42);color:var(--ink)}.nav-item:hover i{opacity:1}.sidebar-bottom{margin-top:auto}.theme-button{width:100%;display:flex;align-items:center;gap:8px;padding:12px 10px;border-radius:14px;background:rgba(255,255,255,.25);font-size:10px;color:var(--muted);text-align:left}.theme-button i{margin-left:auto;font-size:14px;font-style:normal;color:var(--accent)}.theme-dot{width:10px;height:10px;border-radius:50%;background:var(--lime);border:1px solid rgba(54,104,61,.23)}.sidebar-bottom .small{margin:7px 0}.sidebar-bottom>p{margin:16px 10px 0;font:8px/1.6 'DM Mono';color:#819582}.app-content{width:min(1110px,calc(100vw - 295px));margin:0 auto;padding:19px 5px 60px}.app-header{min-height:96px;display:flex;justify-content:space-between;align-items:center}.app-header h2{font:600 31px 'Playfair Display';letter-spacing:-.05em;margin:0}.header-actions{display:flex;align-items:center;gap:8px}.icon-button,.notification-button,.profile-trigger{height:37px;min-width:37px;border-radius:50%;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.62);display:grid;place-items:center;color:var(--accent)}.icon-button{font-size:25px}.notification-button{position:relative;font-size:16px}.notification-button b{position:absolute;right:-2px;top:-3px;width:13px;height:13px;display:grid;place-items:center;background:var(--accent);color:#fff;border-radius:50%;font-size:7px}.profile-trigger{display:flex;gap:4px;padding:3px 6px 3px 3px}.profile-trigger i{font-size:11px;font-style:normal}.page{display:none}.page.active-page{display:block;animation:pageIn .45s ease both}@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .welcome-ribbon{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:18px;background:rgba(235,255,190,.45);border:1px solid rgba(255,255,255,.5);font-size:11px;line-height:1.5}.welcome-ribbon>span{width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:var(--lime)}.welcome-ribbon p{margin:0}.welcome-ribbon button{margin-left:auto;background:transparent;color:var(--accent);font:10px 'DM Mono';white-space:nowrap}.home-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(230px,.75fr);gap:18px;margin-top:18px}.composer{padding:16px;border-radius:22px}.composer-top{display:flex;align-items:center;gap:10px;padding-bottom:13px;border-bottom:1px solid rgba(88,134,87,.11)}.composer-top button{background:rgba(255,255,255,.42);text-align:left;padding:10px 14px;border-radius:30px;color:#8b9e8a;font-size:11px;flex:1}.composer-actions{display:flex;justify-content:space-between;padding-top:11px}.composer-actions button{background:transparent;color:var(--muted);font-size:10px}.composer-actions button:first-child{color:#b78554}.empty-feed{margin-top:18px;border-radius:26px;text-align:center;min-height:425px;padding:30px 20px}.empty-planet{width:158px;height:158px;border-radius:50%;margin:0 auto 22px;background:radial-gradient(circle at 35% 30%,#fbffdd 0 4%,transparent 5%),radial-gradient(circle at 62% 25%,#c5ee8d 0 7%,transparent 8%),linear-gradient(135deg,#c3eb98,#7fbc79);position:relative;box-shadow:inset -15px -13px 25px rgba(57,117,67,.17),0 14px 25px rgba(80,141,71,.13)}.empty-planet:after{content:'';position:absolute;width:205px;height:37px;border:2px solid rgba(255,255,255,.72);border-left-color:transparent;border-right-color:transparent;border-radius:50%;top:60px;left:-26px;transform:rotate(-17deg)}.empty-planet>span{position:absolute;font-size:15px}.empty-planet>span:first-child{top:-18px;left:18px;color:var(--accent)}.empty-planet>span:nth-child(2){right:-13px;bottom:22px;font-size:21px}.empty-planet div{position:absolute;top:58px;left:62px;color:white;font-size:26px}.empty-feed h3,.profile-placeholder h3{font:600 28px/.98 'Playfair Display';letter-spacing:-.04em;margin:0}.empty-feed>p:not(.eyebrow){max-width:300px;margin:16px auto;color:var(--muted);font-size:11px;line-height:1.7}.soft-button{display:inline-flex;align-items:center;gap:20px;background:rgba(255,255,255,.49);border:1px solid rgba(255,255,255,.75);border-radius:30px;padding:10px 15px;color:var(--accent);font-size:10px;box-shadow:0 5px 16px rgba(50,96,52,.08);transition:.2s}.soft-button:hover{background:var(--pale);transform:translateY(-2px)}.soft-button span{font-size:16px}.home-side{display:grid;gap:18px;align-content:start}.day-card,.onboarding{border-radius:22px;padding:20px}.day-card-clock{font:600 46px/.9 'DM Mono';letter-spacing:-.1em;margin:18px 0;color:var(--ink)}.day-card-clock span{color:var(--accent)}.day-card>p:not(.eyebrow){font-size:11px;line-height:1.6;color:var(--muted)}.day-card button{background:transparent;padding:0;color:var(--accent);font:10px 'DM Mono'}.day-card button span{font-size:15px}.onboarding-head{display:flex;justify-content:space-between;font-size:11px}.onboarding-head p{margin:0}.onboarding-head b{font:10px 'DM Mono';color:var(--accent)}.onboarding-progress{height:5px;border-radius:9px;background:rgba(255,255,255,.44);margin:12px 0}.onboarding-progress i{display:block;width:50%;height:100%;border-radius:inherit;background:var(--accent)}.onboarding ul{padding:0;margin:0;list-style:none;display:grid;gap:9px;font-size:10px;color:var(--muted)}.onboarding li.done{color:var(--accent)} .profile-hero{min-height:300px;border-radius:27px;padding:28px;overflow:hidden;position:relative}.profile-aurora{position:absolute;inset:-30% -5% auto auto;width:48%;height:180%;background:radial-gradient(ellipse at center,rgba(211,246,125,.9),rgba(223,255,207,.07) 66%);transform:rotate(-28deg);filter:blur(5px)}.profile-identity{position:relative;display:flex;align-items:center;gap:16px}.large-avatar{width:78px;height:78px;font-size:22px}.profile-identity h3{font:600 31px/.95 'Playfair Display';margin:0;letter-spacing:-.05em}.handle{margin:5px 0 0;font:10px 'DM Mono';color:var(--muted)}.outline-button{margin-left:auto;border:1px solid rgba(77,125,76,.27);border-radius:30px;background:rgba(255,255,255,.32);padding:9px 13px;color:var(--accent);font-size:10px}.profile-bio{position:relative;max-width:410px;font-size:13px;line-height:1.7;margin:30px 0 26px}.profile-stats{position:relative;display:flex;gap:17px;font-size:10px;color:var(--muted)}.profile-stats b{color:var(--ink);font-size:14px;margin-right:4px}.profile-layout{display:grid;grid-template-columns:1.3fr .7fr;gap:18px;margin-top:18px}.profile-placeholder,.now-playing{border-radius:25px;padding:27px;min-height:238px}.profile-placeholder h3{margin-bottom:21px}.now-playing{text-align:center}.now-playing .record{width:55px;height:55px;display:grid;place-items:center;border-radius:50%;margin:13px auto;background:repeating-radial-gradient(#4c7952 0 2px,#315c3b 3px 5px);color:#efffcf;border:7px solid #426d48;box-shadow:0 5px 14px rgba(52,104,54,.23)}.now-playing h4{font:600 16px/1.1 'Playfair Display';margin:12px}.now-playing button{background:transparent;color:var(--accent);font-size:10px} .friends-intro{display:flex;justify-content:space-between;align-items:end}.friends-intro h3,.music-heading h3{font:600 38px/.94 'Playfair Display';margin:0;letter-spacing:-.05em}.friends-intro h3 em,.music-heading h3 em{color:var(--accent)}.friends-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-top:19px}.friends-empty,.contact-panel{border-radius:27px;padding:32px}.friends-empty{text-align:center;min-height:470px}.friend-sculpture{height:162px;position:relative;margin-bottom:11px}.friend-sculpture:before,.friend-sculpture:after{content:'';position:absolute;border-radius:50%;background:linear-gradient(135deg,#efffcf,#91cd85);box-shadow:inset -12px -10px 15px rgba(56,116,63,.12)}.friend-sculpture:before{width:116px;height:116px;left:calc(50% - 72px);top:16px}.friend-sculpture:after{width:86px;height:86px;left:calc(50% + 10px);top:53px;background:linear-gradient(135deg,#f5ffd9,#c6e5aa)}.friend-sculpture span{position:absolute;z-index:1}.friend-sculpture span:first-child{font-size:48px;color:#fff;left:calc(50% - 53px);top:47px}.friend-sculpture span:nth-child(2){color:var(--accent);left:calc(50% + 49px);top:30px}.friend-sculpture span:last-child{font-size:31px;color:#7fb17a;left:calc(50% + 37px);top:79px}.friends-empty h4{font:600 26px/1.02 'Playfair Display';margin:0}.friends-empty>p:not(.eyebrow){font-size:11px;line-height:1.7;max-width:320px;margin:17px auto;color:var(--muted)}.contact-panel>p{margin-bottom:14px}.contact-action{width:100%;display:flex;align-items:center;text-align:left;gap:10px;padding:13px 0;background:transparent;border-bottom:1px solid rgba(86,132,84,.13)}.action-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.45);color:var(--accent);font-size:18px}.contact-action b,.contact-action small{display:block}.contact-action b{font-size:11px}.contact-action small{font-size:9px;color:var(--muted);margin-top:3px}.contact-action i{font-size:15px;margin-left:auto;color:var(--accent);font-style:normal}.safe-note{display:flex;gap:8px;margin-top:22px;padding:10px;border-radius:13px;background:rgba(236,255,195,.44);color:var(--muted);font-size:9px;line-height:1.5}.safe-note span{font-size:15px;color:var(--accent)} .music-heading{padding:10px 0 22px}.music-heading>p:last-child{color:var(--muted);font-size:12px;margin:13px 0 0}.music-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:18px}.vinyl-stage,.music-list{border-radius:28px;padding:27px;min-height:430px}.vinyl-stage{text-align:center;overflow:hidden;position:relative}.vinyl-glow{position:absolute;width:230px;height:230px;border-radius:50%;background:#d5f68d;filter:blur(40px);opacity:.45;left:calc(50% - 115px);top:25px}.vinyl{position:relative;width:191px;height:191px;margin:8px auto 20px;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(#23452d 0 2px,#193a25 3px 5px,#375b3d 6px 8px);box-shadow:10px 13px 23px rgba(43,92,48,.27),inset 0 0 30px #0a2213;animation:spin 18s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.vinyl-label{width:70px;height:70px;display:grid;place-items:center;border-radius:50%;background:#d8f58c;color:#2d5f37;font:9px/1.1 'DM Mono';letter-spacing:.03em}.vinyl-stage>p{position:relative;margin:0;color:var(--accent);font:10px 'DM Mono'}.vinyl-stage h4{position:relative;font:600 23px/1 'Playfair Display';margin:13px}.music-list-header{display:flex;justify-content:space-between;border-bottom:1px solid rgba(83,130,82,.12);padding-bottom:14px}.music-list-header p{margin:0}.music-list-header span{font:10px 'DM Mono';color:var(--muted)}.track-empty{height:300px;display:grid;place-content:center;text-align:center;color:var(--muted);font-size:12px;line-height:1.8}.track-empty span{font:45px 'Playfair Display';color:#b0cc9b}.ghost-line{width:100%;background:transparent;border-top:1px solid rgba(83,130,82,.12);padding:13px;color:var(--accent);font:10px 'DM Mono';text-align:left} .modal{width:min(470px,calc(100% - 30px));border:1px solid rgba(255,255,255,.75);border-radius:29px;padding:30px;color:var(--ink);background:var(--glass-strong);box-shadow:0 28px 80px rgba(42,76,45,.27);backdrop-filter:blur(28px)}.modal::backdrop{background:rgba(33,66,40,.17);backdrop-filter:blur(5px)}.close-modal{float:right;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.55);font-size:21px;color:var(--muted)}.modal h3{font:600 32px/.98 'Playfair Display';letter-spacing:-.05em;margin:0 0 25px}.modal textarea{display:block;width:100%;height:100px;border:0;border-radius:15px;padding:14px;background:rgba(255,255,255,.45);outline:none;resize:none;color:var(--ink);font-size:12px}.modal-controls{display:flex;align-items:center;gap:7px;margin-top:13px}.modal-controls .primary-button{margin-left:auto}.modal-tool{background:transparent;color:var(--muted);font-size:10px}.invite-modal input{margin:10px 0 24px;padding:10px 2px}.message-modal .no-friends-note{padding:16px;border-radius:15px;background:rgba(255,255,255,.37);display:flex;gap:12px;align-items:center;margin-bottom:19px}.no-friends-note span{font-size:24px;color:var(--accent)}.no-friends-note p{margin:0;font-size:11px;line-height:1.6;color:var(--muted)}.toast{position:fixed;z-index:10;bottom:25px;left:50%;transform:translate(-50%,100px);opacity:0;transition:.35s;background:var(--ink);color:#f7ffe9;padding:12px 18px;border-radius:30px;font-size:11px;box-shadow:0 10px 30px rgba(24,55,31,.25)}.toast.show{transform:translate(-50%,0);opacity:1} @media (max-width:800px){.auth-topline{left:20px;right:20px}.auth-topline span:nth-child(2),.auth-topline span:nth-child(3){display:none}.auth-card{padding:58px 28px 33px}.setup-layout{grid-template-columns:1fr;gap:30px;margin-top:45px}.setup-copy{padding-left:5px}.progress-line{display:none}.app-screen{padding:10px;display:block}.sidebar{position:fixed;z-index:5;bottom:10px;left:10px;right:10px;top:auto;width:auto;min-height:58px;height:58px;padding:6px 8px;border-radius:20px;display:flex;align-items:center;flex-direction:row}.sidebar .wordmark,.sidebar .mini-profile,.sidebar-bottom{display:none}.main-nav{padding:0;display:flex;width:100%;justify-content:space-between;gap:2px}.nav-item{width:auto;flex:1;justify-content:center;padding:10px 4px;font-size:0}.nav-item>span{font-size:19px}.app-content{width:100%;padding:9px 5px 85px}.app-header{min-height:74px}.app-header h2{font-size:27px}.header-actions .icon-button{display:none}.home-grid,.profile-layout,.friends-layout,.music-layout{grid-template-columns:1fr}.home-side{grid-template-columns:1fr 1fr}.empty-feed{min-height:360px}.friends-intro h3,.music-heading h3{font-size:33px}.friends-intro{align-items:center}.friends-intro .eyebrow{margin-bottom:5px}.friends-empty{min-height:390px}.profile-hero{min-height:270px}.profile-identity{align-items:flex-start}.outline-button{position:absolute;right:0;bottom:-40px}.profile-bio{margin-top:50px}.music-list{min-height:300px}.track-empty{height:180px}} @media (max-width:480px){.auth-card h1{font-size:40px}.auth-card{min-height:535px}.setup-screen{padding:17px 21px 40px}.setup-header p{display:none}.profile-form{padding:22px}.name-row{gap:10px}.mood-pills{gap:3px}.mood-pill{padding:7px 6px;font-size:9px}.welcome-ribbon button{display:none}.welcome-ribbon{font-size:10px}.home-side{grid-template-columns:1fr}.composer-actions button span{display:none}.profile-stats{gap:9px}.friends-intro .primary-button{font-size:0;padding:12px}.friends-intro .primary-button:first-letter{font-size:16px}.modal-controls .modal-tool{display:none}} /* -------------------------------------------------------------------------- green-web 2000s skin — inspired by glossy browser-era communities -------------------------------------------------------------------------- */ :root { --ink:#193c29; --muted:#547160; --accent:#207343; --lime:#baf26c; --pale:#eaffe0; --glass:rgba(234,255,225,.8); --glass-strong:rgba(246,255,240,.92); --line:#4f805d; --chrome-light:#f8fff1; --chrome-mid:#b8dfae; --chrome-dark:#346e48; --shadow:0 2px 0 #16482b, 0 4px 0 rgba(255,255,255,.66), 0 8px 18px rgba(6,54,29,.34), inset 0 1px 0 rgba(255,255,255,.97); } body { background-color:#76ad70; background-image:radial-gradient(ellipse at 50% -25%,rgba(239,255,207,.92),transparent 48%),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(145deg,#3d8454,#b9ec96 46%,#4e9561); background-size:auto,18px 18px,18px 18px,auto; font-family:Verdana,Arial,sans-serif; color:var(--ink); } body.gray { --ink:#27352c; --muted:#606e65; --accent:#486457; --lime:#dbe4d6; --pale:#eff3eb; --glass:rgba(240,244,239,.86); --glass-strong:rgba(250,252,249,.94); --line:#75857a; --chrome-light:#fff; --chrome-mid:#cdd6cf; --chrome-dark:#53695d; background-image:radial-gradient(ellipse at 50% -25%,rgba(255,255,255,.9),transparent 48%),linear-gradient(90deg,rgba(255,255,255,.17) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.17) 1px,transparent 1px),linear-gradient(145deg,#71827a,#d9e0d8 46%,#899b90); } button { font-family:Verdana,Arial,sans-serif; } .film-grain { opacity:.08; mix-blend-mode:multiply; }.backdrop-orb { filter:none; border:2px solid rgba(255,255,255,.24); box-shadow:inset 0 1px 8px rgba(255,255,255,.85), 0 8px 18px rgba(17,65,35,.18); }.orb-one { width:320px;height:320px;right:5%;top:-120px;background:rgba(199,255,104,.48); }.orb-two{background:rgba(234,255,206,.38)}.orb-three{background:rgba(102,197,96,.27)} .glass-card { background:linear-gradient(115deg,rgba(255,255,255,.86),var(--glass) 43%,rgba(181,232,165,.74)); border:2px solid var(--chrome-dark); box-shadow:var(--shadow); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .eyebrow { font-family:"DM Mono",monospace; color:var(--accent); letter-spacing:.08em; font-size:9px; text-shadow:0 1px #fff; } /* sign-up window */ .auth-screen { padding:50px 24px 36px; }.auth-topline { position:relative; top:auto; left:auto; right:auto; width:min(760px,100%); height:27px; margin:0 0 -1px; padding:6px 12px; background:linear-gradient(#ecffe6,#8ecb86 52%,#4f8f59 53%,#d0f4c6); border:2px solid var(--chrome-dark); border-radius:9px 9px 0 0; box-shadow:0 2px 0 rgba(255,255,255,.65) inset; color:#174125; font-weight:700; font-size:9px; text-shadow:0 1px #fff; }.auth-topline:before{content:'● ● ●';letter-spacing:3px;color:#e86e69;font-size:8px}.auth-topline .brand-mark{display:none}.auth-topline span:nth-child(2){margin-left:auto}.auth-topline span:nth-child(3){margin-left:16px}.auth-card { width:min(760px,100%); min-height:535px; padding:67px 95px 44px; border-radius:0 0 23px 23px; background:linear-gradient(115deg,rgba(252,255,246,.91),rgba(210,249,189,.79)); border-top:0; box-shadow:0 4px 0 #1c5130,0 12px 26px rgba(13,63,31,.38),inset 0 1px 0 #fff; overflow:visible; }.auth-card:before{content:'applecore — регистрация нового пользователя';position:absolute;left:14px;right:14px;top:13px;height:25px;padding:6px 10px;box-sizing:border-box;border-radius:5px;background:linear-gradient(#f8fff2 0,#b9e5ae 48%,#78b979 50%,#d5f6c8);border:1px solid #4c8055;box-shadow:inset 0 1px #fff;font:700 9px Verdana;color:#235533;text-align:left}.auth-card:after{display:none}.sparkle { position:absolute; right:35px; top:63px; width:54px;height:54px;background:linear-gradient(145deg,#e9ffb8,#8fcf68); border:2px solid #4e9155; box-shadow:inset 0 2px 2px #fff,0 3px 0 #38713f,0 6px 12px rgba(43,92,45,.2); color:#296a3a; }.auth-card h1 { font-family:Georgia,"Times New Roman",serif; font-size:47px; letter-spacing:-.06em; text-shadow:1px 2px #fff; }.auth-card h1 em{color:#1e7543}.intro{max-width:425px;font-size:12px;color:#3e6550;line-height:1.65}.field-shell{border-radius:7px;background:#fff;border:2px solid #6aa675;box-shadow:inset 0 2px 3px rgba(25,90,38,.17),0 1px #fff;padding:3px 4px 3px 12px}.round-button{border-radius:6px;background:linear-gradient(#7cbd7a,#2d7a43);border:1px solid #15532b;box-shadow:inset 0 1px #ddffc8,0 2px 0 #15532b}.auth-orbits{margin:22px 0 0}.auth-orbits span{border-radius:6px;border:1px solid #71a978;background:linear-gradient(#fbfff9,#ceefc8);box-shadow:inset 0 1px #fff;color:#34613f;font:9px Verdana}.retro-smileys{display:flex;justify-content:center;gap:9px;margin:22px 0 -29px}.retro-smileys span,.emoji-dock button,.buddy-row span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 34% 24%,#fffbd1 0 8%,#f7e66d 29%,#e9ad34 75%,#b97816);border:1px solid #ab7422;box-shadow:inset 0 2px 3px rgba(255,255,255,.85),0 2px 0 #9b6a22,0 4px 7px rgba(67,63,12,.22);color:#6f4f11;font:700 10px/1 Arial;transform:rotate(-3deg)}.retro-smileys span:nth-child(2n){transform:rotate(4deg) translateY(-6px)}.auth-screen .legal{position:relative;bottom:auto;margin:12px 0 0;color:#e8ffe5;font-weight:bold;text-shadow:0 1px 1px #235234} /* profile set-up window */ .setup-header { border-bottom:2px solid var(--chrome-dark);padding:0 9px;height:45px;background:linear-gradient(#f4fff0,#a8d99f 50%,#5a9760 52%,#d9f4cf);border-radius:9px 9px 0 0;box-shadow:0 1px #fff inset }.setup-header .wordmark{font-family:Georgia,serif;font-size:20px;text-shadow:1px 1px #fff}.setup-layout{width:min(980px,100%);gap:47px;background:rgba(235,255,226,.38);border:1px solid rgba(255,255,255,.46);padding:36px;border-radius:0 0 20px 20px;box-shadow:0 8px 24px rgba(10,57,25,.22)}.setup-copy h2{font-family:Georgia,serif;font-size:45px}.profile-form{border-radius:9px;padding:23px;background:linear-gradient(135deg,#fbfff8,#c9edc2);border:2px ridge #fff;box-shadow:0 1px 0 #275738,0 5px 15px rgba(13,65,30,.22)}.avatar-upload{padding:11px;background:rgba(255,255,255,.45);border:1px solid #84b787}.avatar-preview,.mini-avatar,.large-avatar{border-radius:5px;border:2px solid #416f4a;box-shadow:inset 0 1px #fff,0 2px 0 rgba(28,76,40,.5)}.avatar-upload i{border-radius:5px;background:linear-gradient(#fff,#bce4b6);border:1px solid #619868;color:#285d35}.profile-form input,.profile-form textarea,.invite-modal input{border:1px solid #76a87c;background:rgba(255,255,255,.7);padding:7px;box-shadow:inset 0 1px 2px rgba(34,91,40,.15)}.mood-pills{gap:5px}.mood-pill,.soft-button,.outline-button{border-radius:5px;border:1px solid #5c9565;background:linear-gradient(#fff,#c5eabf);box-shadow:inset 0 1px #fff,0 1px 0 #396a42}.mood-pill.selected{background:linear-gradient(#dffff0,#89d977);color:#174f2b}.primary-button{border-radius:6px;background:linear-gradient(#7ccb79,#276f3e);border:1px solid #15532b;box-shadow:inset 0 1px #dfffd2,0 2px 0 #164e2a}.primary-button:hover{box-shadow:inset 0 1px #edffdb,0 3px 0 #164e2a} /* main browser / social network layout */ .app-screen{padding:18px;gap:10px;max-width:1320px;margin:auto}.sidebar{width:221px;min-height:calc(100vh - 36px);padding:13px 11px;border-radius:11px;background:linear-gradient(90deg,rgba(239,255,231,.89),rgba(169,218,157,.85));border:2px solid #1c5632;box-shadow:0 2px #fff inset,4px 5px 0 rgba(24,83,42,.38),0 11px 22px rgba(15,56,28,.26)}.sidebar:before{content:'applecore .com';display:block;padding:7px 9px;margin:-2px -2px 13px;border-radius:5px;background:linear-gradient(#f4fff0,#b2dfab 48%,#5c9662 50%,#d6f4cb);border:1px solid #497f53;box-shadow:inset 0 1px #fff;font:700 12px Georgia,serif;color:#1e5932;letter-spacing:-.04em}.sidebar .wordmark{display:none}.mini-profile{padding:10px 6px 15px;border-bottom:1px solid #74aa79}.main-nav{padding:13px 0;gap:7px}.nav-item{border-radius:20px;padding:8px 9px;border:1px solid transparent;font-family:Verdana;font-size:11px;color:#315d3c}.nav-item>span{font-size:16px}.nav-item:hover,.nav-item.active{border-color:#2b7444;background:linear-gradient(#f9fff7,#bce5b5 49%,#8bcf82 51%,#d9f6cd);box-shadow:inset 0 1px #fff,0 1px 0 #2f7042;color:#143e22}.nav-item.active{outline:2px solid #e6db63;outline-offset:-4px}.nav-item i{font:8px Verdana}.theme-button{border-radius:5px;border:1px solid #609968;background:linear-gradient(#fff,#c9ebc2);box-shadow:inset 0 1px #fff;font-size:10px}.sidebar-bottom>p{color:#2d603a;font-size:8px}.app-content{width:min(1080px,calc(100vw - 270px));padding:0 5px 60px}.app-header{min-height:82px;padding:10px 16px 9px;margin-bottom:10px;border:2px solid #1a5932;border-radius:10px;background:linear-gradient(90deg,rgba(242,255,238,.86),rgba(185,231,173,.77));box-shadow:0 2px #fff inset,0 4px 0 rgba(21,77,37,.47),0 9px 18px rgba(10,56,27,.22)}.app-header:before{content:'File Edit View Friends Music Help';position:absolute;top:0;left:0;right:0;height:17px;padding:3px 10px;box-sizing:border-box;border-radius:8px 8px 0 0;background:linear-gradient(#fcfff9,#bddfb5);border-bottom:1px solid #689d6c;color:#285a36;font:8px Verdana}.app-header>div:first-child{margin-top:15px}.app-header h2{font-family:Georgia,serif;font-size:28px;color:#1c4e2c;text-shadow:1px 1px #fff}.header-actions{margin-top:15px}.icon-button,.notification-button,.profile-trigger{border-radius:5px;border:1px solid #5a9562;background:linear-gradient(#fff,#c5eabf);box-shadow:inset 0 1px #fff,0 1px #326c3d}.profile-trigger{border-radius:18px}.page{padding:0 3px} .welcome-ribbon{border-radius:5px;border:1px solid #5a935e;background:linear-gradient(90deg,#eaffd6,#c0efad 50%,#e7ffd9);box-shadow:inset 0 1px #fff,0 2px 0 #4c8553;font-size:11px}.welcome-ribbon>span{border-radius:4px;background:#8cca70}.welcome-ribbon button{border:1px solid #619c68;border-radius:4px;background:linear-gradient(#fff,#c9eac2);padding:5px 8px}.home-grid{grid-template-columns:minmax(0,1.55fr) minmax(225px,.7fr);gap:12px;margin-top:12px}.composer{padding:9px;border-radius:8px}.composer-window-title{display:flex;align-items:center;gap:5px;margin:-1px -1px 9px;padding:5px 7px;border:1px solid #4d8555;border-radius:4px;background:linear-gradient(#f9fff6,#a7dca0 48%,#5d9c63 50%,#d0f2c7);font:8px Verdana;color:#1c4c2b}.composer-window-title b{margin-left:4px}.composer-window-title i{margin-left:auto;font-style:normal;font-size:11px}.window-bulb{width:8px;height:8px;border-radius:50%;border:1px solid rgba(63,70,24,.5);box-shadow:inset 0 1px rgba(255,255,255,.7)}.window-bulb.red{background:#e77e70}.window-bulb.yellow{background:#eed76a}.window-bulb.green{background:#73b76b}.composer-top{padding:2px 6px 10px}.composer-top button{border:1px inset #a5cba1;border-radius:3px;background:#fff;padding:9px 10px;font:11px Verdana;color:#677d69}.composer-actions{padding:9px 6px 2px}.composer-actions button{font:9px Verdana;color:#3b6a45}.emoji-dock{display:flex;align-items:center;gap:4px;border-top:1px solid #91bd8e;padding:7px 5px 1px}.emoji-dock button{width:24px;height:24px;padding:0;background:radial-gradient(circle at 34% 24%,#fffbd1 0 8%,#f7e66d 29%,#e9ad34 75%,#b97816);font-size:7px}.emoji-dock button:hover{transform:translateY(-2px) rotate(3deg)}.empty-feed{border-radius:8px;min-height:420px;padding:25px 20px;background:linear-gradient(135deg,rgba(255,255,255,.89),rgba(212,247,198,.78))}.empty-feed:before,.friends-empty:before,.profile-placeholder:before{content:'✦ applecore community ✦';display:block;margin:-10px auto 18px;width:max-content;padding:4px 14px;border-radius:3px;background:linear-gradient(#fbfff8,#c2eab8);border:1px solid #79a876;color:#32683e;font:8px Verdana}.empty-planet{width:135px;height:135px}.empty-feed h3,.profile-placeholder h3{font-family:Georgia,serif;font-size:27px;color:#244e30}.empty-feed>p:not(.eyebrow){font-size:11px;color:#44654d}.soft-button{font-size:10px;color:#214f2d}.day-card,.onboarding{border-radius:7px;padding:15px}.day-card{background:linear-gradient(145deg,rgba(242,255,226,.92),rgba(169,223,148,.77))}.day-card-clock{font-family:"DM Mono",monospace;font-size:40px}.onboarding{background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(211,242,198,.76))}.onboarding-progress{height:8px;border:1px solid #609b67}.onboarding-progress i{background:linear-gradient(#9cdb83,#3f924f)} /* secondary sections */ .profile-hero{border-radius:8px;padding:24px;background:linear-gradient(100deg,rgba(252,255,248,.9),rgba(188,233,168,.79))}.profile-aurora{border-radius:0;background:repeating-linear-gradient(45deg,rgba(233,255,175,.66) 0 10px,rgba(133,205,112,.32) 10px 20px);filter:none}.profile-identity h3{font-family:Georgia,serif;font-size:31px}.profile-layout{gap:12px;margin-top:12px}.profile-placeholder,.now-playing{border-radius:8px;min-height:225px;padding:22px}.now-playing .record{border:5px solid #355c3a}.friends-intro h3,.music-heading h3{font-family:Georgia,serif;font-size:35px}.friends-layout,.music-layout{gap:12px;margin-top:12px}.friends-empty,.contact-panel{border-radius:8px;padding:25px;background:linear-gradient(135deg,rgba(252,255,247,.89),rgba(196,235,181,.75))}.friends-empty{min-height:450px}.friend-sculpture{height:128px}.buddy-row{display:flex;justify-content:center;gap:7px;margin:-5px 0 13px}.buddy-row span{width:27px;height:27px;font-size:8px}.friends-empty h4{font-family:Georgia,serif}.contact-action{border-bottom:1px solid #8cba8c}.action-icon{border-radius:5px;border:1px solid #6ca16d;background:linear-gradient(#fff,#bde4b6)}.safe-note{border:1px solid #84b27b;border-radius:4px;background:#efffd3}.music-heading{padding:8px 0 16px}.vinyl-stage,.music-list{border-radius:8px;padding:23px;min-height:410px}.vinyl-stage{background:linear-gradient(135deg,rgba(252,255,247,.9),rgba(178,229,158,.79))}.music-list{background:linear-gradient(135deg,rgba(252,255,247,.89),rgba(204,241,189,.74))}.vinyl-label{font-family:"DM Mono",monospace}.ghost-line{border:1px solid #6fa670;border-radius:4px;background:linear-gradient(#fff,#cbebc4);text-align:center} /* dialogs */ .modal{border-radius:8px;border:2px solid #245e36;background:linear-gradient(145deg,rgba(252,255,248,.95),rgba(205,242,190,.95));box-shadow:0 3px 0 #1f5732,0 15px 35px rgba(10,53,25,.4),inset 0 1px #fff}.modal:before{content:'applecore pop-up window';display:block;margin:-18px -18px 20px;padding:6px 10px;background:linear-gradient(#f9fff6,#a9dca0 48%,#5f9e66 50%,#d2f3c9);border-bottom:1px solid #497d52;color:#1a4d2a;font:8px Verdana}.modal h3{font-family:Georgia,serif}.close-modal{position:relative;z-index:1;border-radius:4px;border:1px solid #a85a55;background:linear-gradient(#ffbeb7,#df6c62);color:#fff}.modal textarea{border:1px solid #6da26d;border-radius:4px;background:#fff}.toast{border:1px solid #c9f1b9;background:linear-gradient(#4b9a58,#1e5b34);box-shadow:0 2px 0 #103b20;color:#f4ffe9;font-family:Verdana;font-size:10px} @media (max-width:800px){.auth-card{padding:67px 29px 43px}.auth-topline{width:100%}.setup-layout{padding:22px}.app-screen{padding:9px}.sidebar{background:linear-gradient(90deg,rgba(239,255,231,.93),rgba(169,218,157,.9));border-radius:9px}.main-nav{gap:3px}.nav-item.active{outline-width:1px}.app-content{padding-top:0}.app-header{margin-bottom:9px}.home-grid,.profile-layout,.friends-layout,.music-layout{gap:10px}.emoji-dock{justify-content:center}.friends-empty{min-height:390px}} @media (max-width:480px){.auth-topline span:nth-child(3){display:none}.auth-card h1{font-size:38px}.auth-card .sparkle{right:20px}.retro-smileys{gap:5px}.retro-smileys span{width:27px;height:27px;font-size:8px}.app-header{padding-left:11px;padding-right:11px}.app-header h2{font-size:24px}.welcome-ribbon{padding:8px;font-size:9px}.friends-intro h3,.music-heading h3{font-size:29px}.composer-window-title i{font-size:9px}.emoji-dock button:nth-last-child(-n+2){display:none}} /* Grove identity, language control, secure sign-up, and lively button motion */ .auth-card:before{content:'Grove — new account';}.sidebar:before{content:'Grove .social';}.modal:before{content:'Grove pop-up window';}.empty-feed:before,.friends-empty:before,.profile-placeholder:before{content:'✦ Grove community ✦';} .auth-card h1,.setup-copy h2,.app-header h2,.empty-feed h3,.profile-placeholder h3,.profile-identity h3,.friends-intro h3,.music-heading h3,.friends-empty h4,.modal h3,.now-playing h4{font-family:"Trebuchet MS",Verdana,Arial,sans-serif;font-style:normal;font-weight:800;letter-spacing:-.045em}.auth-card h1 em,.setup-copy em,.profile-placeholder em,.friends-empty em,.music-heading em,.friends-intro em,.modal h3 em{font-style:normal}.auth-card h1{font-size:43px;line-height:1.02}.setup-copy h2{font-size:41px}.app-header h2{font-size:27px}.empty-feed h3,.profile-placeholder h3{font-size:25px}.friends-intro h3,.music-heading h3{font-size:33px}.friends-empty h4{font-size:24px} .language-picker{display:flex;align-items:center;margin-left:10px}.language-picker select,.app-language-picker select{appearance:none;border:1px solid #3b794b;border-radius:4px;background:linear-gradient(#fff,#c6ebbf);color:#1d5530;padding:3px 19px 3px 6px;font:700 8px Verdana;box-shadow:inset 0 1px #fff,0 1px 0 #2b6a3b;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,#2d6840 50%),linear-gradient(135deg,#2d6840 50%,transparent 50%),linear-gradient(#fff,#c6ebbf);background-position:calc(100% - 8px) 8px,calc(100% - 5px) 8px,0 0;background-size:3px 3px,3px 3px,100% 100%;background-repeat:no-repeat}.app-language-picker{display:flex;align-items:center}.auth-topline{align-items:center}.auth-topline span:nth-child(2){margin-left:auto}.auth-topline span:nth-child(3){margin-left:14px}.auth-card{min-height:650px;padding-top:65px}.auth-card .intro{margin-bottom:20px}.password-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:11px 0 0}.password-row label{font:500 10px "DM Mono",monospace;letter-spacing:.03em;color:#466a50}.password-row input{display:block;width:100%;margin-top:5px;border:2px solid #6aa675;border-radius:5px;background:#fff;box-shadow:inset 0 2px 3px rgba(25,90,38,.16);outline:0;padding:8px;color:var(--ink);font-size:12px}.password-row input:focus{border-color:#2f8245;box-shadow:0 0 0 3px rgba(177,235,128,.5),inset 0 2px 3px rgba(25,90,38,.12)}.password-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:9px 1px 5px}.password-meter i{height:5px;border-radius:2px;border:1px solid #75a979;background:#eef7e9;transition:background .25s ease,transform .25s ease,box-shadow .25s ease}.password-meter i.lit{background:linear-gradient(#bef681,#4b9f55);box-shadow:0 1px 0 #206134;transform:scaleY(1.22)}.password-hint{min-height:14px;margin:0 0 13px;font-size:9px;color:#4e7256}.password-hint.weak,.password-hint.error{color:#a5473f}.password-hint.strong{color:#197238;font-weight:bold}.auth-submit{margin-top:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} button:not(:disabled){position:relative;isolation:isolate;transition:transform .18s cubic-bezier(.2,.8,.2,1),filter .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;will-change:transform}button:not(:disabled)::after{content:'';position:absolute;z-index:-1;top:-140%;left:-35%;width:32%;height:340%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);transform:rotate(24deg) translateX(-260%);transition:transform .5s ease}button:not(:disabled):hover{transform:translateY(-2px) scale(1.025);filter:saturate(1.16) brightness(1.04);box-shadow:0 3px 0 rgba(20,81,39,.56),0 7px 12px rgba(16,67,31,.22),inset 0 1px rgba(255,255,255,.9)}button:not(:disabled):hover::after{transform:rotate(24deg) translateX(760%)}button:not(:disabled):active{transform:translateY(2px) scale(.975);filter:saturate(.92) brightness(.97);transition-duration:.08s;box-shadow:0 1px 0 rgba(20,81,39,.5),inset 0 2px 5px rgba(18,73,33,.25)}.nav-item:hover,.nav-item.active:hover{animation:navPulse .52s ease both}.emoji-dock button:hover{animation:smileyBounce .48s cubic-bezier(.2,.9,.3,1) both}.round-button:hover,.icon-button:hover,.notification-button:hover{animation:tinySpin .46s ease both}@keyframes navPulse{50%{padding-left:14px}}@keyframes smileyBounce{50%{transform:translateY(-6px) rotate(12deg) scale(1.13)}}@keyframes tinySpin{50%{transform:translateY(-3px) rotate(-12deg) scale(1.1)}} @media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} @media (max-width:800px){.auth-card{min-height:685px}.language-picker{margin-left:auto}.auth-topline span:nth-child(2){display:none}.password-row{gap:6px}} @media (max-width:480px){.auth-card{min-height:704px;padding-left:25px;padding-right:25px}.auth-card h1{font-size:36px}.auth-topline span:nth-child(3){display:none}.password-row{grid-template-columns:1fr}.retro-smileys{margin-top:16px}.auth-card .sparkle{top:59px}.app-language-picker select{font-size:7px;padding-left:5px}.app-header .header-actions{gap:4px}} /* Settings and music connections */ .auth-card:before{content:'Groven — new account'}.sidebar:before{content:'Groven .social'}.modal:before{content:'Groven pop-up window'}.empty-feed:before,.friends-empty:before,.profile-placeholder:before{content:'✦ Groven community ✦'} /* Real post publishing and photo attachments */ .post-feed{display:grid;gap:12px;margin-top:12px}.profile-post-feed{margin-top:12px}.post-card{overflow:hidden;border:1px solid #5d9763;border-radius:8px;background:linear-gradient(145deg,rgba(253,255,250,.94),rgba(203,240,188,.8));box-shadow:inset 0 1px #fff,0 3px 0 rgba(46,102,54,.68),0 12px 22px rgba(49,98,52,.12)}.post-card-head{display:flex;align-items:center;gap:9px;padding:9px 11px;border-bottom:1px solid #91be8f;background:linear-gradient(#f8fff6,#c6ebbd 48%,#a8d99f)}.post-card-avatar{width:29px;height:29px;flex:0 0 29px;display:grid;place-items:center;border:1px solid #57925f;border-radius:5px;background:linear-gradient(#f8fff0,#b9e5ad);background-size:cover;background-position:center;color:#235832;font:700 10px Verdana}.post-card-author{min-width:0}.post-card-author b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#245430;font:700 10px Verdana}.post-card-author time{display:block;margin-top:2px;color:#557d5a;font:8px 'DM Mono',monospace}.post-delete{margin-left:auto;padding:4px 7px;border:1px solid #8ab688;border-radius:4px;background:linear-gradient(#fff,#d8f1ce);color:#477b4c;font:8px Verdana;opacity:.88}.post-delete:hover{background:linear-gradient(#ffe4df,#f1aaa0);border-color:#c17a72;color:#893c36;transform:translateY(-1px)}.post-card-body{margin:0;padding:13px 13px 5px;white-space:pre-wrap;color:#294f31;font:12px/1.62 Verdana,Arial,sans-serif}.post-card-body:empty{display:none}.post-media{display:block;margin:10px 12px 13px;border:1px solid #679c68;border-radius:5px;overflow:hidden;background:#e7f8df;box-shadow:inset 0 1px #fff}.post-media img{display:block;width:100%;max-height:520px;object-fit:contain;background:#ecf8e6}.post-photo-preview{position:relative;display:block;overflow:hidden;margin:12px 0 0;border:1px solid #5f9c65;border-radius:5px;background:#effbe7;box-shadow:inset 0 1px #fff}.post-photo-preview img{display:block;width:100%;max-height:250px;object-fit:contain}.post-photo-preview button{position:absolute;right:7px;top:7px;width:26px;height:26px;border:1px solid #a7544e;border-radius:4px;background:linear-gradient(#ffb9af,#e3695f);color:#fff;font:18px/1 Arial;box-shadow:0 1px 0 #8b403a}.modal-controls #addPostPhoto{padding:6px 8px;border:1px solid transparent;border-radius:4px}.modal-controls #addPostPhoto:hover{border-color:#6da26d;background:#efffe8;color:#245b31}.modal-controls #addPostPhoto.has-photo{border-color:#5e9d62;background:linear-gradient(#f6fff3,#b7e5ad);color:#215d2d} @media (max-width:480px){.post-card-body{font-size:11px}.post-media img{max-height:390px}.post-photo-preview img{max-height:210px}.modal-controls #addPostPhoto{display:inline-flex}.modal-controls #addPostPhoto span{display:inline}.post-delete{font-size:7px}} /* Closed-beta friends, invites, and direct messages */ .friend-hub{min-height:430px;text-align:left}.friend-hub:before{content:'✦ Groven circle ✦'}.friend-hub h4{margin:4px 0 17px;font-family:"Trebuchet MS",Verdana,Arial,sans-serif;font-size:25px;line-height:1.04;color:#244e30}.friend-search{padding:13px;border:1px solid #7dac78;border-radius:6px;background:rgba(253,255,250,.7);box-shadow:inset 0 1px #fff}.friend-search label,.message-label{display:block;margin-bottom:7px;color:#486e4d;font:9px Verdana}.friend-search>div{display:flex;gap:7px}.friend-search input,.invite-link-row input,.message-label select{min-width:0;flex:1;border:1px solid #75a773;border-radius:4px;background:#fff;color:#254f31;font:11px Verdana;padding:9px}.friend-search .soft-button{padding:8px 11px;white-space:nowrap}.friend-results,.friend-section{margin-top:12px}.friend-results{min-height:0;color:#496a4e;font:10px/1.5 Verdana}.friend-cards{display:grid;gap:8px}.friend-card{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #82ad7f;border-radius:6px;background:linear-gradient(145deg,#fbfff8,#d4f0cc);box-shadow:inset 0 1px #fff}.friend-card-identity{min-width:0;display:flex;align-items:center;gap:8px;flex:1}.friend-avatar{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border:1px solid #58925f;border-radius:5px;background:linear-gradient(#f8fff0,#b9e5ad);background-size:cover;background-position:center;color:#235832;font:700 10px Verdana}.friend-card b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#245430;font:700 10px Verdana}.friend-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;color:#638166;font:8px Verdana}.friend-card .soft-button{padding:7px 9px;white-space:nowrap}.friend-status{color:#638166;font:8px Verdana;white-space:nowrap}.friends-empty-copy{margin-top:17px;padding:12px;border:1px dashed #83af80;border-radius:5px;background:rgba(255,255,255,.35);text-align:center}.friends-empty-copy p{margin:0 0 11px;color:#4b6b50;font:10px/1.55 Verdana}.invite-copy{margin:-11px 0 17px;color:#4b6b50;font:11px/1.55 Verdana}.invite-link-row{display:flex;gap:8px;margin-top:7px}.invite-link-row input{font-size:10px}.invite-link-row .soft-button{padding:8px 10px;white-space:nowrap}.message-label select{width:100%;margin-top:4px}.message-thread{display:grid;gap:7px;max-height:210px;overflow:auto;margin:12px 0;padding:10px;border:1px solid #7fab7e;border-radius:5px;background:rgba(255,255,255,.55)}.message-empty{margin:10px 0;color:#58775b;text-align:center;font:10px Verdana}.message-bubble{max-width:80%;margin:0;padding:8px 10px;border:1px solid #79a876;border-radius:8px 8px 8px 2px;background:#f8fff4;color:#284f32;font:11px/1.45 Verdana}.message-bubble.mine{justify-self:end;border-color:#5d9a63;border-radius:8px 8px 2px 8px;background:linear-gradient(#efffdf,#bce7b0)}.message-modal textarea{height:72px;margin:0 0 10px}.message-modal .primary-button{margin-left:auto}.contact-action small{color:#6b8b70}.contact-action:disabled{opacity:.55} @media (max-width:480px){.friend-search>div,.invite-link-row{flex-direction:column}.friend-search .soft-button,.invite-link-row .soft-button{justify-content:center}.friend-card{align-items:flex-start}.friend-card .soft-button{font-size:9px}.message-thread{max-height:180px}} /* Shared post reactions and conversation */ .post-social-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:11px 12px 10px;margin-top:10px;border-top:1px solid #a7cfa5;background:linear-gradient(180deg,rgba(247,255,244,.46),rgba(187,229,177,.45))}.post-social-button{min-width:0;padding:7px 5px;border:1px solid #79ab79;border-radius:5px;background:linear-gradient(#fff,#d9f2d1);box-shadow:inset 0 1px #fff,0 1px 0 rgba(47,104,55,.34);color:#356b41;font:700 9px Verdana,Arial,sans-serif;letter-spacing:.02em;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease,background .18s ease}.post-social-button:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:inset 0 1px #fff,0 3px 0 rgba(47,104,55,.38)}.post-social-button:active{transform:translateY(1px);box-shadow:inset 0 2px 3px rgba(36,89,43,.22)}.post-social-button.active{border-color:#3f8a4b;background:linear-gradient(#f4ffdf,#9bdf87 52%,#76bd69);color:#185929;text-shadow:0 1px rgba(255,255,255,.55)}.post-social-button:disabled{cursor:wait;opacity:.62;transform:none}.post-comments{margin:0 12px 13px;padding:10px;border:1px solid #8ebc8a;border-radius:6px;background:rgba(251,255,248,.7);box-shadow:inset 0 1px rgba(255,255,255,.95);animation:pageIn .24s ease both}.post-comments-list{display:grid;gap:7px;max-height:230px;overflow:auto;padding-right:2px}.post-comments-empty{margin:3px 0;padding:5px;color:#58785d;text-align:center;font:9px/1.4 Verdana}.post-comment{display:flex;align-items:flex-start;gap:7px;padding:7px;border:1px solid #b0d2ab;border-radius:5px;background:linear-gradient(120deg,#fff,#e4f6dd)}.post-comment-avatar{width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center;border:1px solid #69a36b;border-radius:4px;background:linear-gradient(#fbfff7,#c4ebba);background-size:cover;background-position:center;color:#285e37;font:700 8px Verdana}.post-comment-copy{min-width:0}.post-comment-copy b{display:block;color:#2f603b;font:700 9px Verdana}.post-comment-copy p{margin:3px 0 0;white-space:pre-wrap;color:#355c3c;font:10px/1.4 Verdana,Arial,sans-serif}.post-comment-form{display:flex;gap:6px;margin-top:9px}.post-comment-form input{min-width:0;flex:1;padding:8px;border:1px solid #79ac78;border-radius:4px;background:#fff;color:#2c5434;font:10px Verdana}.post-comment-form button{padding:7px 10px;border:1px solid #5c9a5f;border-radius:4px;background:linear-gradient(#f8fff4,#addfa0);box-shadow:inset 0 1px #fff,0 1px #3f8248;color:#1d6131;font:700 9px Verdana;transition:transform .18s ease,filter .18s ease}.post-comment-form button:hover{filter:brightness(1.05);transform:translateY(-1px)}.post-comment-form button:active{transform:translateY(1px)}.post-comment-form button:disabled{opacity:.6;cursor:wait} @media (max-width:480px){.post-social-bar{gap:4px;padding:9px}.post-social-button{padding:7px 3px;font-size:8px}.post-comments{margin:0 9px 10px;padding:8px}.post-comment-form{gap:4px}.post-comment-form button{padding:7px 8px;font-size:8px}} /* Public profile guestbooks */ .profile-guestbook{margin-top:18px;padding:24px;border-radius:24px}.profile-guestbook-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.profile-guestbook-head .eyebrow{margin:0 0 6px}.profile-guestbook-head h3,.profile-guestbook-head h4{margin:0;color:#264f33;font:600 23px/1 "Playfair Display",serif;letter-spacing:-.04em}.profile-guestbook-head h3 em{color:#367745}.profile-guestbook-head>b{padding:7px 9px;border:1px solid #8db987;border-radius:20px;background:rgba(255,255,255,.46);color:#417248;font:9px "DM Mono",monospace;white-space:nowrap}.profile-guestbook-copy{margin:11px 0;color:#54765a;font:10px/1.55 Verdana,Arial,sans-serif}.profile-guestbook-comments{display:grid;gap:8px;max-height:290px;overflow:auto;padding-right:2px}.profile-comment-item{display:flex;align-items:flex-start;gap:8px;padding:8px;border:1px solid #a9cda4;border-radius:7px;background:linear-gradient(120deg,rgba(255,255,255,.84),rgba(225,245,217,.86));box-shadow:inset 0 1px rgba(255,255,255,.96)}.profile-comment-avatar,.public-profile-avatar{display:grid;place-items:center;background:linear-gradient(#fbfff7,#c4ebba);background-size:cover;background-position:center;color:#285e37}.profile-comment-avatar{width:27px;height:27px;flex:0 0 27px;border:1px solid #69a36b;border-radius:5px;font:700 8px Verdana}.profile-comment-item>div{min-width:0}.profile-comment-item b{display:block;color:#2e603b;font:700 9px Verdana}.profile-comment-item p{margin:3px 0 0;white-space:pre-wrap;color:#355c3c;font:10px/1.45 Verdana,Arial,sans-serif}.profile-comments-empty{margin:3px 0;padding:9px;border:1px dashed #9fc59a;border-radius:6px;color:#5d7f61;text-align:center;font:9px/1.45 Verdana}.profile-guestbook-form{display:flex;gap:7px;margin-top:10px}.profile-guestbook-form input{min-width:0;flex:1;padding:9px;border:1px solid #78aa78;border-radius:5px;background:#fff;color:#285338;font:10px Verdana}.profile-guestbook-form button,.friend-profile-button{border:1px solid #5d9c62;border-radius:5px;background:linear-gradient(#f8fff4,#b2e2a5);box-shadow:inset 0 1px #fff,0 1px #397342;color:#1e6031;font:700 9px Verdana;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}.profile-guestbook-form button{padding:8px 11px}.profile-guestbook-form button:hover,.friend-profile-button:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:inset 0 1px #fff,0 2px 0 #397342}.profile-guestbook-form button:active,.friend-profile-button:active{transform:translateY(1px);box-shadow:inset 0 2px 3px rgba(36,89,43,.22)}.profile-guestbook-form button:disabled{cursor:wait;opacity:.6}.friend-card-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}.friend-profile-button{padding:7px 8px;white-space:nowrap}.public-profile-modal{width:min(570px,calc(100% - 26px));max-height:calc(100vh - 34px);overflow:auto}.public-profile-head{display:flex;align-items:center;gap:12px}.public-profile-avatar{width:57px;height:57px;flex:0 0 57px;border:1px solid #68a26b;border-radius:11px;font:700 15px Verdana}.public-profile-head .eyebrow{margin:0 0 5px}.public-profile-head h3{margin:0;color:#254f31;font:600 27px/.95 "Playfair Display",serif;letter-spacing:-.04em}.public-profile-bio{margin:7px 0 0;color:#55765b;font:10px/1.5 Verdana}.public-profile-stats{margin:15px 0;padding:9px;border:1px solid #9dc799;border-radius:6px;background:rgba(240,255,232,.58);color:#396c43;font:9px "DM Mono",monospace}.public-profile-guestbook{margin-top:15px;padding-top:14px;border-top:1px solid #a5cca0}.public-profile-guestbook .profile-guestbook-head{margin-bottom:10px} @media (max-width:480px){.profile-guestbook{margin-top:12px;padding:16px}.profile-guestbook-head h3{font-size:20px}.profile-guestbook-form{gap:4px}.profile-guestbook-form button{padding:8px 7px;font-size:8px}.friend-card-actions{width:100%;justify-content:flex-end}.friend-card-actions .soft-button,.friend-profile-button{padding:7px 8px}.public-profile-modal{padding:21px}.public-profile-head h3{font-size:23px}} /* Closed-beta consent */ .terms-consent{display:flex;align-items:flex-start;gap:7px;margin:11px 2px 8px;color:#486c50;font:9px/1.45 Verdana,Arial,sans-serif}.terms-consent input{width:14px;height:14px;flex:0 0 14px;margin:0;accent-color:#367f45}.terms-consent a{color:#21693a;font-weight:bold;text-underline-offset:2px}.terms-consent a:hover{color:#164d2a}.form-note#privacyNotice{margin-top:5px} .auth-link{display:block;margin:8px auto 0;padding:2px 5px;background:transparent;color:#2e7141;font:9px Verdana,Arial,sans-serif;text-decoration:underline;text-underline-offset:3px}.auth-link:hover{color:#174d2a;transform:translateY(-1px)} .settings-modal{width:min(875px,calc(100% - 26px));max-height:calc(100vh - 34px);overflow:auto}.settings-modal h3,.music-connect-modal h3{margin-bottom:18px}.settings-shell{display:grid;grid-template-columns:168px 1fr;min-height:405px;border:1px solid #6ba371;background:rgba(255,255,255,.35);border-radius:5px;overflow:hidden}.settings-tabs{padding:8px;background:linear-gradient(180deg,rgba(178,224,168,.83),rgba(237,255,228,.58));border-right:1px solid #6ba371;display:grid;align-content:start;gap:5px}.settings-tab{display:flex;gap:7px;align-items:center;width:100%;padding:8px 7px;border:1px solid transparent;border-radius:4px;background:transparent;color:#2a5936;text-align:left;font:10px Verdana}.settings-tab.active{border-color:#3d804b;background:linear-gradient(#fbfff7,#b9e9ad 48%,#82c879 50%,#def8d3);box-shadow:inset 0 1px #fff,0 1px #326c3d}.settings-panels{padding:17px;background:rgba(251,255,248,.55)}.settings-panel{display:none;animation:pageIn .25s ease both}.settings-panel.active{display:block}.settings-panel h4{margin:0 0 13px;font:800 18px "Trebuchet MS",Verdana,sans-serif;color:#265438}.settings-email{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:9px;border:1px solid #78aa77;border-radius:5px;background:linear-gradient(100deg,#fafff8,#d8f4d1)}.settings-email>span{width:31px;height:31px;display:grid;place-items:center;border-radius:4px;background:linear-gradient(#fff,#bee6b8);border:1px solid #6ea670;color:#2f7b43;font-weight:bold}.settings-email p{flex:1;margin:0}.settings-email b,.settings-email small{display:block}.settings-email b{font-size:10px}.settings-email small{margin-top:3px;color:#5b7761;font-size:8px}.settings-email .soft-button{padding:6px 9px;font-size:8px}.settings-row{width:100%;display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid #a3cca0;background:transparent;text-align:left}.settings-row>span:first-child{width:29px;height:29px;display:grid;place-items:center;border-radius:4px;background:linear-gradient(#fff,#c5e9bc);border:1px solid #72a773;color:#2b7040;font-size:15px}.settings-row>span:nth-child(2){flex:1}.settings-row b,.settings-row small{display:block}.settings-row b{font-size:10px}.settings-row small{margin-top:3px;color:#5a7761;font-size:8px}.settings-row>i{font-style:normal;color:#2b7040;font-size:16px}.settings-row.danger b{color:#9d4540}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 1px;border-bottom:1px solid #a3cca0;cursor:pointer}.toggle-row span{max-width:78%}.toggle-row b,.toggle-row small{display:block}.toggle-row b{font-size:10px}.toggle-row small{margin-top:3px;color:#5a7761;font-size:8px;line-height:1.35}.toggle-row input{position:absolute;opacity:0;pointer-events:none}.toggle-row i{width:34px;height:18px;border:1px solid #5b975f;border-radius:20px;background:#cadac9;box-shadow:inset 0 1px 2px rgba(28,80,37,.26);position:relative;transition:.2s}.toggle-row i:after{content:'';position:absolute;width:13px;height:13px;left:2px;top:1px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(26,68,34,.4);transition:.2s}.toggle-row input:checked+i{background:linear-gradient(#86d174,#42944d)}.toggle-row input:checked+i:after{left:17px}.music-connect-modal{width:min(715px,calc(100% - 26px));max-height:calc(100vh - 34px);overflow:auto}.music-email-note{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid #75a873;border-radius:5px;background:linear-gradient(90deg,#efffdc,#c5edae)}.music-email-note>span{font-size:20px;color:#2d7540}.music-email-note p{margin:0}.music-email-note b,.music-email-note small{display:block}.music-email-note b{font-size:10px}.music-email-note small{margin-top:2px;color:#426e4e;font:9px "DM Mono",monospace}.platform-note{margin:12px 0;color:#527157;font-size:10px;line-height:1.55}.platform-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.platform-card{min-height:87px;padding:9px 6px;border:1px solid #699d6b;border-radius:5px;background:linear-gradient(145deg,#fff,#d6f1ce);text-align:center;color:#28553a}.platform-card .platform-logo{display:grid;place-items:center;width:27px;height:27px;margin:0 auto 5px;border-radius:50%;border:1px solid rgba(23,82,35,.3);box-shadow:inset 0 1px rgba(255,255,255,.7);font-size:14px;color:#fff}.platform-logo.spotify{background:#1db954}.platform-logo.apple{background:#3c3c3c}.platform-logo.youtube{background:#f03a36}.platform-logo.soundcloud{background:#ee7c29}.platform-logo.deezer{background:#7b5be3}.platform-logo.tidal{background:#151515}.platform-logo.bandcamp{background:#3c8ca0}.platform-logo.other{background:#5a9d5f}.platform-card b,.platform-card small{display:block}.platform-card b{font-size:9px;white-space:nowrap}.platform-card small{margin-top:3px;color:#55775c;font-size:8px}.platform-card.connected{border-color:#2b7d42;background:linear-gradient(#eaffdc,#99dc80);box-shadow:inset 0 1px #fff,0 2px 0 #2c7540}.platform-card.connected small{color:#206c3a;font-weight:bold}.connect-status{min-height:18px;margin:12px 0 0;text-align:center;color:#23713d;font-size:10px;font-weight:bold} @media (max-width:650px){.settings-shell{grid-template-columns:1fr}.settings-tabs{grid-template-columns:repeat(3,1fr);border-right:0;border-bottom:1px solid #6ba371}.settings-tab{justify-content:center;font-size:0}.settings-tab span{font-size:8px}.settings-tab:first-letter{font-size:14px}.platform-grid{grid-template-columns:repeat(2,1fr)}.settings-modal,.music-connect-modal{padding:24px 17px 17px}.settings-modal:before,.music-connect-modal:before{margin:-12px -5px 16px}.settings-panel h4{font-size:16px}} /* Real account access */ .auth-switch{margin:13px 0 0;text-align:center;color:#52705b;font-size:10px;line-height:1.5}.auth-switch button{padding:3px 7px;border:1px solid #5a9665;border-radius:4px;background:linear-gradient(#fff,#c7eabf);color:#1c6535;font:700 10px Verdana;cursor:pointer}.password-row label[hidden]{display:none}.auth-submit:disabled{cursor:wait;filter:grayscale(.25);opacity:.76} /* Interactive settings sheets */ .settings-action-modal{width:min(470px,calc(100% - 26px))}.settings-action-modal h3{margin-bottom:15px}.settings-action-copy{margin:0;color:#486c50;font-size:12px;line-height:1.6}.settings-action-copy+.outline-button,.settings-action-copy+.soft-button{margin-top:15px}.settings-form{display:grid;gap:11px}.settings-form label{display:grid;gap:5px;color:#315a3a;font-size:10px;font-weight:700}.settings-form input,.settings-form textarea,.settings-form select{width:100%;padding:9px 10px;border:1px solid #72a773;border-radius:5px;background:rgba(255,255,255,.7);color:#234f30;font:11px "Manrope",sans-serif}.settings-form textarea{min-height:78px;resize:vertical}.settings-form-note{margin:-2px 0 0;color:#5d7760;font-size:9px;line-height:1.45}.settings-form .primary-button{justify-content:center;margin-top:3px}.settings-action-modal .outline-button{margin-top:12px} /* Mobile layout safety — kept last so the desktop skin cannot widen the bottom navigation. */ @media (max-width:800px){ html,body{width:100%;overflow-x:hidden} body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))} .app-screen.screen{display:none;width:100%;max-width:none;padding:9px} .app-screen.screen.is-active{display:block} .app-content{width:100%;max-width:none;margin:0;padding:0 0 94px} .sidebar{position:fixed;z-index:20;left:9px;right:9px;bottom:calc(9px + env(safe-area-inset-bottom,0px));top:auto;width:auto;min-height:0;height:58px;padding:6px 8px;display:flex;align-items:center;flex-direction:row} .sidebar:before,.sidebar .wordmark,.sidebar .mini-profile,.sidebar-bottom{display:none} .main-nav{display:flex;width:100%;height:100%;padding:0;align-items:center;justify-content:space-between;gap:3px} .nav-item{min-width:0;height:46px;flex:1 1 0;justify-content:center;padding:6px 3px;font-size:0} .nav-item>span{width:auto;font-size:17px} .nav-item>b,.nav-item i{display:none} .home-grid,.profile-layout,.friends-layout,.music-layout{grid-template-columns:minmax(0,1fr)} .home-side{grid-template-columns:minmax(0,1fr)} } @media (max-width:480px){ .app-screen{padding:7px} .app-content{padding-left:0;padding-right:0} .app-header{min-height:80px} } /* Settings stay reachable from the portrait phone navigation. */ .mobile-settings-button{display:none} @media (max-width:800px){.mobile-settings-button{display:flex}} /* Keep the home and settings symbols as matching text glyphs on iPhone. */ .nav-icon-text{font-family:Verdana,Arial,sans-serif;font-variant-emoji:text;font-style:normal;font-weight:400;line-height:1} /* Этап 1: изолированные экраны знакомства и стартовая подборка. */ .groven-onboarding{width:min(680px,calc(100% - 24px));max-height:calc(100vh - 24px);overflow:auto}.groven-onboarding h3{margin:10px 0 7px;color:#244f31;font:800 28px/1.05 "Trebuchet MS",Verdana,sans-serif}.onboarding-copy{margin:0 0 16px;color:#4d7354;font:12px/1.55 Verdana,Arial,sans-serif}.onboarding-stepper,.starter-progress{height:8px;overflow:hidden;border:1px solid #6da170;border-radius:12px;background:rgba(255,255,255,.55)}.onboarding-stepper i,.starter-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#92d978,#3f914c);transition:width .25s ease}.interest-grid{display:flex;flex-wrap:wrap;gap:7px}.interest-chip{padding:9px 11px;border:1px solid #77a978;border-radius:20px;background:rgba(255,255,255,.55);color:#285637;font:700 11px Verdana,Arial,sans-serif;transition:transform .16s ease,background .16s ease}.interest-chip:hover{transform:translateY(-1px)}.interest-chip.selected{border-color:#377e49;background:linear-gradient(#f3ffe9,#9cdd86);box-shadow:inset 0 1px #fff;color:#1e5e31}.onboarding-note{margin:12px 0;color:#55775a;font:10px/1.5 Verdana,Arial,sans-serif}.onboarding-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.onboarding-input{display:grid;gap:6px;color:#315e3c;font:10px Verdana,Arial,sans-serif}.onboarding-input textarea{min-height:100px;padding:11px;border:1px solid #76a978;border-radius:8px;background:#fff;color:#244e30;font:12px Verdana,Arial,sans-serif;resize:vertical}.onboarding-people{display:grid;gap:8px;max-height:300px;overflow:auto}.onboarding-person{display:flex;align-items:center;gap:9px;padding:9px;border:1px solid #a2c9a0;border-radius:8px;background:rgba(255,255,255,.56)}.onboarding-person>div{min-width:0;flex:1}.onboarding-person b,.onboarding-person small{display:block}.onboarding-person b{font:700 11px Verdana,Arial,sans-serif;color:#275635}.onboarding-person small{margin-top:3px;color:#55775a;font:9px Verdana,Arial,sans-serif}.onboarding-person .soft-button{padding:7px 9px;white-space:nowrap}.onboarding-empty{margin:0;padding:18px;color:#5a7b5e;text-align:center;font:11px/1.5 Verdana,Arial,sans-serif}.starter-feed{margin-top:14px;padding:16px;border-radius:11px;border:1px solid #6ca26e;background:rgba(247,255,242,.73)}.starter-head{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:14px;align-items:center}.starter-head .eyebrow{margin:0 0 5px}.starter-head h3{margin:0;color:#254f31;font:800 20px/1 "Trebuchet MS",Verdana,sans-serif}.starter-head h3 b{font:11px "DM Mono",monospace;color:#347741}.starter-goal{display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:14px 0;list-style:none}.starter-goal li{padding:6px 8px;border:1px solid #a1c89e;border-radius:15px;color:#68836b;font:9px Verdana,Arial,sans-serif}.starter-goal li.done{border-color:#4a954d;background:#dff8d6;color:#246435}.official-updates,.starter-people{display:grid;gap:7px;margin-top:12px}.official-updates>article{padding:9px;border-left:3px solid #6db66c;background:rgba(229,250,215,.52)}.official-updates b{color:#2c633a;font:700 11px Verdana,Arial,sans-serif}.official-updates p{margin:4px 0 0;color:#54765a;font:10px/1.45 Verdana,Arial,sans-serif}.starter-people>button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;align-items:center;padding:9px;border:1px solid #a2caa0;border-radius:7px;background:rgba(255,255,255,.55);text-align:left}.starter-people span{color:#2a5b37;font:700 10px Verdana,Arial,sans-serif}.starter-people small{color:#5d7a60;font:9px Verdana,Arial,sans-serif}.starter-people b{grid-column:2;grid-row:1/3;color:#2b7540;font:9px Verdana,Arial,sans-serif} @media (max-width:650px){.groven-onboarding{padding:22px 16px 16px}.groven-onboarding h3{font-size:24px}.interest-grid{gap:6px}.interest-chip{padding:8px 9px;font-size:10px}.onboarding-actions{flex-wrap:wrap}.onboarding-actions .primary-button{flex:1;justify-content:center}.starter-head{grid-template-columns:1fr}.starter-progress{width:100%}.starter-feed{padding:13px}.onboarding-person{align-items:flex-start}.onboarding-person .soft-button{font-size:9px}.starter-goal{display:grid;grid-template-columns:1fr}.starter-people>button{padding:10px}} /* First UX polish: one clear next step, quieter surfaces, and a personal profile. */ .next-step-card{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:14px;margin-top:12px;padding:14px 16px;border-radius:10px;border:1px solid #6a9e6d;background:linear-gradient(100deg,rgba(252,255,248,.89),rgba(211,242,193,.64));box-shadow:inset 0 1px rgba(255,255,255,.95),0 3px 0 rgba(43,104,56,.25)} .next-step-number{display:grid;place-items:center;width:38px;height:38px;border:1px solid #4a8755;border-radius:50%;background:linear-gradient(#f9fff3,#aadf92);color:#235e35;font:800 10px "DM Mono",monospace;box-shadow:inset 0 1px #fff} .next-step-card .eyebrow{margin:0 0 4px}.next-step-card h3{margin:0;color:#204d2d;font:800 17px/1.1 "Trebuchet MS",Verdana,sans-serif;letter-spacing:-.025em}.next-step-card p:not(.eyebrow){margin:4px 0 0;color:#57765b;font:11px/1.4 Verdana,Arial,sans-serif}.next-step-card .primary-button{min-height:38px;padding:8px 12px;white-space:nowrap} .profile-hero{min-height:0;padding-top:40px}.profile-cover-note{position:absolute;top:12px;right:16px;padding:4px 7px;border:1px solid rgba(54,111,61,.45);border-radius:3px;background:rgba(251,255,247,.55);color:#376c43;font:8px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em}.profile-signals{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}.profile-signals span{max-width:215px;overflow:hidden;padding:5px 7px;border:1px solid rgba(61,125,72,.54);border-radius:14px;background:rgba(249,255,244,.65);color:#356b41;font:8px Verdana,Arial,sans-serif;white-space:nowrap;text-overflow:ellipsis}.profile-hero[data-mood="bright"] .profile-aurora{background:radial-gradient(ellipse at center,rgba(247,231,112,.8),rgba(223,255,207,.07) 66%)}.profile-hero[data-mood="calm"] .profile-aurora{background:radial-gradient(ellipse at center,rgba(141,197,177,.72),rgba(223,255,207,.07) 66%)}.profile-stats span:last-child{display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border:1px solid rgba(79,130,80,.32);border-radius:13px;background:rgba(255,255,255,.35)} .empty-feed{min-height:300px;padding:24px 20px}.empty-feed .soft-button{min-height:38px}.home-side .glass-card{box-shadow:inset 0 1px rgba(255,255,255,.9),0 3px 0 rgba(43,104,56,.2)} @media (max-width:800px){.next-step-card{grid-template-columns:35px minmax(0,1fr);padding:12px}.next-step-card .primary-button{grid-column:2;justify-self:start}.next-step-card h3{font-size:16px}.profile-hero{padding:38px 17px 18px}.profile-cover-note{right:12px}.profile-identity{gap:11px}.profile-signals{max-width:calc(100vw - 132px)}.profile-stats{flex-wrap:wrap}.profile-stats span{min-height:32px;display:inline-flex;align-items:center}.profile-bio{margin:20px 0}.outline-button{position:static;margin-left:auto;align-self:flex-start}.app-header h2{font-size:25px}.welcome-ribbon{align-items:flex-start}.welcome-ribbon button{display:none}} @media (max-width:480px){.next-step-card{grid-template-columns:33px minmax(0,1fr);gap:9px;margin-top:9px}.next-step-number{width:33px;height:33px;font-size:9px}.next-step-card h3{font-size:15px}.next-step-card p:not(.eyebrow){font-size:10px}.next-step-card .primary-button{width:100%;justify-content:center;font-size:10px}.profile-identity h3{font-size:25px}.large-avatar{width:61px;height:61px}.profile-cover-note{font-size:7px}.profile-signals{max-width:100%;margin-left:-72px;padding-top:4px}.profile-signals span{max-width:100%;font-size:8px}.profile-stats{gap:6px;font-size:9px}.profile-stats b{font-size:13px}.empty-feed{min-height:260px}.empty-planet{width:92px;height:92px;margin-bottom:14px}.empty-feed h3{font-size:22px}} /* Community safety controls */ .public-profile-actions{display:flex;gap:8px;margin:13px 0}.public-profile-actions .outline-button{margin:0;position:static}.danger-action{color:#a44642!important;border-color:#cf8580!important;background:linear-gradient(#fff8f7,#f5cbc7)!important}.settings-action-modal .settings-row{gap:8px;padding:9px 0}.settings-action-modal .settings-row .friend-avatar{width:31px;height:31px;flex-basis:31px}.settings-action-modal .settings-row .outline-button{margin:0 0 0 auto;position:static;white-space:nowrap}.post-social-button:last-child{color:#8d504b} /* A calm daily invitation, intentionally smaller than a feed post. */ .today-prompt{padding:17px;margin-top:12px;border-radius:10px;border:1px solid #73a875;background:linear-gradient(145deg,rgba(252,255,248,.92),rgba(203,239,189,.74));box-shadow:inset 0 1px #fff,0 2px 0 rgba(49,106,57,.38)}.today-prompt .eyebrow{margin:0 0 6px}.today-prompt h3{margin:0;color:#285938;font:800 18px/1 "Trebuchet MS",Verdana,Arial,sans-serif}.today-prompt-question{margin:9px 0 5px;color:#275438;font:700 12px/1.45 Verdana,Arial,sans-serif}.today-prompt-hint{margin:0 0 13px;color:#5b7860;font:9px/1.45 Verdana,Arial,sans-serif}.today-prompt .soft-button{padding:8px 10px;font-size:9px} @media (max-width:800px){.today-prompt{padding:14px;margin-top:10px}.today-prompt-question{font-size:11px}.today-prompt .soft-button{width:100%;justify-content:center;min-height:38px}} /* Private owner metrics: deliberately separate from the social product UI. */ .admin-page{display:grid;place-items:center;padding:28px 16px;min-height:100svh}.admin-shell{width:min(1040px,100%);padding:38px;border-radius:24px}.admin-brand{display:inline-block;color:#255637;font:800 24px "Trebuchet MS",Verdana,sans-serif;letter-spacing:-.06em;text-decoration:none}.admin-brand span{color:#4f8e59}.admin-shell h1{margin:7px 0 10px;color:#234e30;font:800 37px/1 "Trebuchet MS",Verdana,sans-serif;letter-spacing:-.04em}.admin-shell h1 em{color:#458047;font-style:normal}.admin-intro{max-width:680px;margin:0 0 24px;color:#55755c;font:12px/1.6 Verdana,Arial,sans-serif}.admin-loading,.admin-denied{padding:22px;border:1px solid #80ae80;border-radius:10px;background:rgba(253,255,250,.67);color:#466d4d;font:11px/1.55 Verdana,Arial,sans-serif}.admin-denied h2{margin:0 0 8px;color:#2d5d38;font:800 22px "Trebuchet MS",Verdana,sans-serif}.admin-denied p{max-width:560px}.admin-denied code{padding:2px 4px;border-radius:3px;background:#e7f7dd;color:#2a673a}.admin-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.admin-metrics article{min-height:105px;padding:16px;border:1px solid #78a978;border-radius:10px;background:linear-gradient(145deg,rgba(255,255,253,.89),rgba(202,239,188,.72));box-shadow:inset 0 1px #fff,0 3px 0 rgba(47,100,54,.27)}.admin-metrics small{display:block;color:#55785c;font:9px/1.35 Verdana,Arial,sans-serif}.admin-metrics b{display:block;margin-top:13px;color:#205a34;font:800 30px/1 "DM Mono",monospace}.admin-table-card{margin-top:16px;padding:19px;border:1px solid #77a675;border-radius:12px;background:rgba(252,255,248,.7)}.admin-table-card .eyebrow{margin:0 0 4px}.admin-table-card h2{margin:0;color:#285437;font:800 22px "Trebuchet MS",Verdana,sans-serif}.admin-table-wrap{overflow:auto;margin-top:14px;border:1px solid #a0c99d;border-radius:7px;background:rgba(255,255,255,.5)}.admin-table-wrap table{width:100%;border-collapse:collapse;min-width:680px;color:#315d3c;font:10px Verdana,Arial,sans-serif}.admin-table-wrap th,.admin-table-wrap td{padding:10px;border-bottom:1px solid #c1debd;text-align:left;vertical-align:top}.admin-table-wrap th{color:#56785a;font:8px "DM Mono",monospace;letter-spacing:.06em;text-transform:uppercase}.admin-table-wrap tr:last-child td{border-bottom:0}.admin-table-wrap td b,.admin-table-wrap td small{display:block}.admin-table-wrap td small{margin-top:3px;color:#6a8a6c;font-size:8px} @media (max-width:650px){.admin-page{padding:10px}.admin-shell{padding:24px 15px 18px;border-radius:17px}.admin-shell h1{font-size:30px}.admin-intro{font-size:11px}.admin-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.admin-metrics article{min-height:90px;padding:12px}.admin-metrics b{margin-top:10px;font-size:24px}.admin-table-card{padding:14px}.admin-table-card h2{font-size:19px}} .avatar-image{display:block;width:100%;height:100%;object-fit:cover;border:0} .avatar-upload.is-processing{cursor:wait;opacity:.72;pointer-events:none}.avatar-upload.is-processing .avatar-preview{position:relative;filter:grayscale(.18);animation:avatarPreparing 1s ease-in-out infinite}.avatar-upload.is-processing .avatar-preview:after{content:'…';position:absolute;inset:0;display:grid;place-items:center;background:rgba(18,52,30,.16);color:#fff;font:700 26px/1 Arial;pointer-events:none}@keyframes avatarPreparing{50%{transform:scale(.96)}} .friend-card small.friend-card-handle{margin-top:2px;color:#2f7541;font:8px "DM Mono",monospace} @media (max-width:800px){ input:not([type="range"]),textarea,select{font-size:16px!important} .friend-card,.onboarding-person{min-width:0} .friend-card-identity{min-width:0} .friend-card-actions{min-width:0} .friend-card-actions button{min-height:36px} .settings-form input,.settings-form textarea,.settings-form select{font-size:16px!important} dialog.modal{max-width:calc(100% - 16px)} } @media (max-width:480px){ .friend-card-actions{gap:4px} .friend-card-actions .soft-button,.friend-profile-button{min-height:38px} .settings-form label{font-size:11px} .settings-form-note{font-size:9px} } /* Shared community feed and people discovery. */ .feed-toolbar{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-top:15px;padding:13px 14px;border:1px solid rgba(91,145,93,.38);border-radius:12px;background:rgba(248,255,240,.48)} .feed-toolbar .eyebrow{margin:0 0 4px}.feed-toolbar h3{margin:0;color:#285438;font:800 18px/1 "Trebuchet MS",Verdana,sans-serif;letter-spacing:-.025em}.feed-filters{display:flex;flex-wrap:wrap;gap:5px}.feed-filter{min-height:34px;padding:7px 10px;border:1px solid rgba(78,134,82,.48);border-radius:18px;background:rgba(255,255,255,.42);color:#426e4d;font:700 10px Verdana,Arial,sans-serif;transition:transform .16s ease,background .16s ease,color .16s ease}.feed-filter:hover{transform:translateY(-1px)}.feed-filter.active{border-color:#377a49;background:linear-gradient(#f9ffef,#a6df8d);color:#1e5c35;box-shadow:inset 0 1px #fff,0 2px 0 rgba(45,110,55,.25)} .profile-stat-button{display:inline-flex;align-items:center;gap:4px;min-height:31px;padding:4px 7px;border:1px solid rgba(79,130,80,.32);border-radius:13px;background:rgba(255,255,255,.35);color:var(--muted);font-size:10px;transition:transform .16s ease,background .16s ease}.profile-stat-button:hover{background:rgba(255,255,255,.7);transform:translateY(-1px)}.profile-stat-button b{margin-right:0}.profile-stats>span:last-child{display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border:1px solid rgba(79,130,80,.32);border-radius:13px;background:rgba(255,255,255,.35)} .discover-intro{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:12px 2px 3px}.discover-intro h3{margin:0;color:#244f31;font:700 38px/.95 "Playfair Display",Georgia,serif;letter-spacing:-.055em}.discover-intro h3 em{color:var(--accent)}.discover-intro>div>p:last-child{max-width:540px;margin:13px 0 0;color:var(--muted);font:11px/1.55 Verdana,Arial,sans-serif}.discover-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.46fr);gap:18px;margin-top:18px}.discover-panel,.discover-note,.discover-counts{border-radius:16px}.discover-panel{padding:18px}.discover-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(92,144,91,.25)}.discover-panel-head .eyebrow{margin:0 0 4px}.discover-panel-head h4{margin:0;color:#275638;font:800 20px/1 "Trebuchet MS",Verdana,sans-serif}.text-button{padding:6px 1px;background:transparent;color:#397b48;font:700 10px Verdana,Arial,sans-serif;text-decoration:underline;text-underline-offset:3px}.discover-people,.social-dialog-list{display:grid;gap:9px;margin-top:14px}.social-person-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid #a0c99e;border-radius:10px;background:rgba(255,255,255,.52);box-shadow:inset 0 1px rgba(255,255,255,.82)}.social-person-identity{display:flex;align-items:center;gap:9px;min-width:0}.social-person-identity .friend-avatar{width:39px;height:39px;flex:0 0 39px}.social-person-identity>div{display:grid;gap:2px;min-width:0}.social-person-identity b{overflow:hidden;color:#275638;font:800 11px Verdana,Arial,sans-serif;text-overflow:ellipsis;white-space:nowrap}.social-person-identity small{overflow:hidden;color:#4b7354;font:9px Verdana,Arial,sans-serif;text-overflow:ellipsis;white-space:nowrap}.social-person-identity .social-person-reason{color:#367844}.social-person-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}.social-person-actions .soft-button{padding:7px 10px;gap:0}.quiet-action{color:#5b7760!important}.icon-small-button{display:grid;place-items:center;width:27px;height:27px;border:1px solid rgba(102,142,104,.45);border-radius:50%;background:rgba(255,255,255,.45);color:#54785b;font-size:16px;line-height:1;transition:transform .16s ease}.icon-small-button:hover{transform:scale(1.08);color:#9b544f}.discover-side{display:grid;gap:18px;align-content:start}.discover-note{display:flex;gap:11px;padding:17px}.discover-note>span{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:var(--lime);color:#2e713f}.discover-note .eyebrow{margin:0 0 4px}.discover-note h4{margin:0;color:#285438;font:800 15px/1.15 "Trebuchet MS",Verdana,sans-serif}.discover-note p:last-child{margin:7px 0 0;color:#58765d;font:10px/1.5 Verdana,Arial,sans-serif}.discover-counts{display:grid;grid-template-columns:1fr 1fr;overflow:hidden}.discover-counts button{min-height:92px;padding:14px 8px;background:rgba(255,255,255,.4);color:#55775a;transition:background .16s ease}.discover-counts button+button{border-left:1px solid rgba(85,135,88,.25)}.discover-counts button:hover{background:rgba(255,255,255,.68)}.discover-counts b,.discover-counts span{display:block}.discover-counts b{margin-bottom:6px;color:#245e37;font:800 26px/1 "DM Mono",monospace}.discover-counts span{font:9px Verdana,Arial,sans-serif}.social-modal{width:min(560px,calc(100% - 24px));max-height:calc(100vh - 28px);overflow:auto}.social-modal h3{margin:8px 0 0;color:#255437;font:800 26px/1.05 "Trebuchet MS",Verdana,sans-serif}.social-modal h3 em{color:#49844d}.social-empty{margin:0;padding:20px 10px;color:#5b7860;text-align:center;font:11px/1.55 Verdana,Arial,sans-serif} @media (max-width:800px){.feed-toolbar{align-items:stretch;flex-direction:column;padding:12px}.feed-toolbar h3{font-size:17px}.feed-filters{width:100%}.feed-filter{flex:1;min-height:38px}.discover-intro{align-items:flex-start;flex-direction:column;padding-top:5px;gap:12px}.discover-intro h3{font-size:30px}.discover-intro .primary-button{width:100%;justify-content:center}.discover-layout{grid-template-columns:minmax(0,1fr);margin-top:12px}.discover-side{grid-template-columns:minmax(0,1fr);gap:10px}.discover-note{padding:14px}.discover-counts{min-height:82px}.profile-stat-button{min-height:32px}.social-modal{padding:24px 16px 16px}.social-person-card{align-items:flex-start}.social-person-actions{flex-wrap:wrap;justify-content:flex-end}.social-person-actions .text-button{min-height:34px}.social-person-actions .soft-button{min-height:34px}} @media (max-width:420px){.main-nav{gap:1px}.nav-item{padding-left:1px;padding-right:1px}.nav-item>span{font-size:16px}.sidebar{left:6px;right:6px}.social-person-card{gap:6px;padding:9px}.social-person-identity .friend-avatar{width:34px;height:34px;flex-basis:34px}.social-person-actions{gap:4px}.social-person-actions .soft-button{padding:7px 8px;font-size:9px}.discover-panel{padding:13px}.social-modal h3{font-size:23px}} /* Compact phone time, balanced profile counters, and a quiet third colour mode. */ .mobile-time-widget{display:none} .profile-stats{display:grid;grid-template-columns:repeat(3,max-content);align-items:center;gap:8px} .profile-stats>.profile-stat,.profile-stat-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:5px 9px;border:1px solid rgba(79,130,80,.34);border-radius:15px;background:rgba(255,255,255,.4);color:var(--muted);font-size:10px;white-space:nowrap} .profile-stats>.profile-stat b,.profile-stat-button b{margin:0;color:var(--ink);font-size:14px} @media (max-width:800px){ .mobile-time-widget{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:11px 14px;border-radius:13px} .mobile-time-widget .eyebrow{margin:0 0 3px;font-size:8px} .mobile-time-widget time{display:block;color:var(--ink);font:800 30px/.9 "DM Mono",monospace;letter-spacing:-.08em} .mobile-time-widget time span{color:var(--accent)} .mobile-time-widget p:last-child{margin:5px 0 0;overflow:hidden;color:var(--muted);font:8px/1.2 "DM Mono",monospace;white-space:nowrap;text-overflow:ellipsis;max-width:calc(100vw - 115px)} .mobile-time-widget button{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border:1px solid rgba(75,132,82,.45);border-radius:50%;background:rgba(255,255,255,.48);color:var(--accent);font-size:19px} .home-side .day-card{display:none} .profile-stats{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:6px} .profile-stats>.profile-stat,.profile-stat-button{min-width:0;padding:5px 4px;font-size:9px} } @media (max-width:390px){.mobile-time-widget{padding:10px 12px}.mobile-time-widget time{font-size:27px}.profile-stats>.profile-stat,.profile-stat-button{gap:3px;font-size:8px}.profile-stats>.profile-stat b,.profile-stat-button b{font-size:12px}} body.night{--ink:#edf2ed;--muted:#b7c0b8;--accent:#a7c9ab;--lime:#5b7260;--pale:#334137;--line:rgba(227,238,230,.16);--glass:rgba(45,55,48,.79);--glass-strong:rgba(53,65,57,.9);--shadow:0 15px 40px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07);background:radial-gradient(circle at 14% 16%,rgba(125,141,129,.3),transparent 25%),radial-gradient(circle at 84% 80%,rgba(83,96,87,.34),transparent 27%),linear-gradient(135deg,#242a26,#454c47 48%,#2f3732)} body.night .sidebar{background:linear-gradient(145deg,rgba(43,52,46,.95),rgba(61,71,64,.88))} body.night .glass-card,body.night .feed-toolbar,body.night .profile-stats>.profile-stat,body.night .profile-stat-button,body.night .mobile-time-widget{border-color:rgba(227,238,230,.18);background:rgba(47,58,51,.82);box-shadow:var(--shadow)} body.night .next-step-card,body.night .starter-feed,body.night .today-prompt,body.night .day-card,body.night .onboarding{border-color:rgba(184,210,187,.28);background:linear-gradient(145deg,rgba(55,68,59,.92),rgba(42,52,46,.86));box-shadow:var(--shadow)} body.night .composer-top button,body.night .field-shell,body.night .soft-button,body.night .outline-button,body.night .feed-filter,body.night .profile-signals span,body.night .theme-button,body.night .icon-button,body.night .notification-button,body.night .profile-trigger{border-color:rgba(235,244,237,.17);background:rgba(70,82,73,.7);color:var(--ink)} body.night input,body.night textarea,body.night select,body.night .onboarding-input textarea{border-color:rgba(204,222,205,.32);background:rgba(31,39,34,.72);color:var(--ink)} body.night .composer-window-title{filter:grayscale(.4) brightness(.72)} body.night .profile-aurora,body.night .orb-one,body.night .orb-two,body.night .orb-three{opacity:.2} body.night .feed-toolbar h3,body.night .next-step-card h3,body.night .today-prompt h3,body.night .today-prompt-question,body.night .starter-head h3,body.night .official-updates b,body.night .social-person-identity b{color:var(--ink)} body.night .official-updates>article,body.night .starter-goal li,body.night .social-person-card{border-color:rgba(184,210,187,.2);background:rgba(70,82,73,.48)} body.night .primary-button{background:linear-gradient(#7d9580,#536b58);box-shadow:0 6px 16px rgba(0,0,0,.3)} /* Personal details and small communities: useful profile information without turning it into a dashboard. */ .profile-details-card{margin-top:16px;padding:18px;border-radius:14px}.profile-details-heading,.profile-community-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.profile-details-heading .eyebrow{margin:0 0 5px}.profile-details-heading h3{margin:0;color:#285438;font:800 22px/1 "Trebuchet MS",Verdana,sans-serif}.profile-details-heading h3 em{color:#4e8c52}.profile-details-heading .outline-button{position:static;margin:0;white-space:nowrap}.profile-details-grid{display:grid;grid-template-columns:1.3fr 1fr .72fr;gap:8px;margin-top:15px}.profile-details-grid article{min-height:78px;padding:11px;border:1px solid rgba(91,145,93,.33);border-radius:10px;background:rgba(255,255,255,.42)}.profile-details-grid article:nth-child(4),.profile-details-grid article:nth-child(5){grid-column:span 1}.profile-details-grid small,.profile-community-head small,.public-profile-details small{display:block;color:#608060;font:8px "DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase}.profile-details-grid p{margin:6px 0 0;color:#315d3c;font:11px/1.45 Verdana,Arial,sans-serif}.profile-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}.profile-tags span{padding:4px 6px;border:1px solid rgba(73,134,79,.37);border-radius:12px;background:rgba(240,255,231,.68);color:#376b42;font:8px Verdana,Arial,sans-serif}.profile-tags .profile-detail-empty{padding:0;border:0;background:transparent;color:#6b896e}.profile-community-head{margin-top:15px;padding-top:13px;border-top:1px solid rgba(91,145,93,.25)}.profile-community-head p{margin:4px 0 0;color:#5b7860;font:10px Verdana,Arial,sans-serif}.profile-community-head .soft-button{white-space:nowrap}.profile-community-list{display:grid;gap:7px;margin-top:10px}.profile-community-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border:1px solid rgba(91,145,93,.32);border-radius:9px;background:rgba(255,255,255,.38)}.profile-community-card>div{display:grid;min-width:0;gap:3px}.profile-community-card b{overflow:hidden;color:#2d5d38;font:800 11px Verdana,Arial,sans-serif;text-overflow:ellipsis;white-space:nowrap}.profile-community-card small{overflow:hidden;color:#59775e;font:9px Verdana,Arial,sans-serif;text-overflow:ellipsis;white-space:nowrap}.profile-community-card span{color:#508054;font:8px "DM Mono",monospace}.profile-community-empty{margin:0;padding:11px;border:1px dashed rgba(92,145,94,.4);border-radius:9px;color:#617f65;font:10px/1.45 Verdana,Arial,sans-serif}.community-owner-label{padding:5px 7px;border:1px solid rgba(73,134,79,.34);border-radius:10px;background:rgba(225,248,211,.55);color:#367442!important;white-space:nowrap}.community-modal{width:min(520px,calc(100% - 22px));max-height:calc(100vh - 26px);overflow:auto}.community-modal h3{margin:6px 0 7px;color:#275538;font:800 28px/1 "Trebuchet MS",Verdana,sans-serif}.community-modal h3 em{color:#4b864e}.community-dialog-copy{margin:0 0 14px;color:#5e7a61;font:11px/1.5 Verdana,Arial,sans-serif} /* Search results make following a person an immediate, clear choice. */ .people-recommendations{margin-top:16px;padding:13px;border:1px solid #70a872;border-radius:12px;background:linear-gradient(130deg,rgba(247,255,239,.88),rgba(205,239,188,.58));box-shadow:inset 0 1px rgba(255,255,255,.9),0 2px 0 rgba(45,105,56,.2)}.people-recommendations-head{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:10px}.people-recommendations-head .eyebrow{margin:0 0 4px}.people-recommendations-head h4{margin:0;color:#285638;font:800 18px/1 "Trebuchet MS",Verdana,sans-serif}.people-recommendations-head h4 em{color:#4b884d}.people-recommendations-head>span{max-width:125px;color:#5b7d60;font:8px/1.35 Verdana,Arial,sans-serif;text-align:right}.friend-follow-button{position:static!important;margin:0!important;white-space:nowrap}.friend-card-actions{flex-wrap:wrap} .public-profile-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:12px 0}.public-profile-details p{min-width:0;margin:0;padding:8px;border:1px solid rgba(90,143,92,.27);border-radius:8px;background:rgba(255,255,255,.38)}.public-profile-details p:last-child{grid-column:span 2}.public-profile-details span{display:block;overflow:hidden;margin-top:4px;color:#315e3e;font:10px/1.35 Verdana,Arial,sans-serif;text-overflow:ellipsis;white-space:nowrap} body.night .profile-details-card,body.night .profile-details-grid article,body.night .profile-community-card,body.night .people-recommendations,body.night .public-profile-details p{border-color:rgba(214,232,216,.18);background:rgba(58,70,61,.7)}body.night .profile-details-grid p,body.night .profile-community-card b,body.night .public-profile-details span{color:var(--ink)}body.night .profile-tags span{border-color:rgba(214,232,216,.2);background:rgba(83,97,85,.62);color:var(--ink)} @media (max-width:800px){.profile-details-card{margin-top:11px;padding:14px}.profile-details-heading h3{font-size:20px}.profile-details-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.profile-details-grid article{min-height:70px;padding:10px}.profile-details-grid article:first-child{grid-column:span 2}.profile-community-head{align-items:flex-start;flex-direction:column}.profile-community-head .soft-button{width:100%;justify-content:center}.people-recommendations{padding:12px;margin-top:12px}.friend-card-actions{justify-content:flex-start}.public-profile-details{grid-template-columns:1fr}.public-profile-details p:last-child{grid-column:auto}.community-modal{padding:22px 15px 16px}.community-modal h3{font-size:25px}} @media (max-width:420px){.profile-details-heading{align-items:flex-start;flex-direction:column}.profile-details-heading .outline-button{width:100%;justify-content:center}.profile-details-grid{grid-template-columns:1fr}.profile-details-grid article:first-child{grid-column:auto}.profile-community-card{align-items:flex-start;flex-direction:column}.profile-community-card .text-button,.community-owner-label{align-self:flex-start}.people-recommendations-head>span{max-width:112px}.friend-card-actions .friend-follow-button{font-size:9px;padding:7px 8px}} /* Night mode correction: graphite only, with no glossy streaks across controls. */ body.night{--ink:#edf0f2;--muted:#aeb5bc;--accent:#d7dce1;--lime:#2a2f35;--pale:#1b2025;--line:rgba(228,233,238,.15);--glass:#191d21;--glass-strong:#20252a;--shadow:0 10px 26px rgba(0,0,0,.42);background:radial-gradient(circle at 12% 12%,rgba(186,193,201,.055),transparent 25%),radial-gradient(circle at 87% 84%,rgba(130,138,147,.045),transparent 28%),#0c0e10!important} body.night .backdrop-orb,body.night .profile-aurora,body.night .vinyl-glow{display:none!important} body.night .film-grain{opacity:.012!important;mix-blend-mode:normal!important} body.night .glass-card,body.night .feed-toolbar,body.night .profile-stats>.profile-stat,body.night .profile-stat-button,body.night .mobile-time-widget,body.night .next-step-card,body.night .starter-feed,body.night .today-prompt,body.night .day-card,body.night .onboarding,body.night .settings-shell,body.night .settings-tabs,body.night .settings-panels,body.night .settings-panel,body.night .settings-email,body.night .music-email-note,body.night .platform-card,body.night .profile-details-card,body.night .profile-details-grid article,body.night .profile-community-card,body.night .people-recommendations,body.night .public-profile-details p,body.night .contact-panel,body.night .discover-panel,body.night .friend-card,body.night .post-card,body.night .admin-table-card{border-color:var(--line)!important;background:#1a1e22!important;box-shadow:var(--shadow)!important} body.night .sidebar{background:#15191d!important;border-color:var(--line)!important} body.night .soft-button,body.night .outline-button,body.night .icon-button,body.night .notification-button,body.night .profile-trigger,body.night .theme-button,body.night .feed-filter,body.night .friend-profile-button,body.night .text-button,body.night .settings-tab,body.night .auth-switch button{border-color:rgba(228,233,238,.18)!important;background:#272c31!important;color:var(--ink)!important} body.night .soft-button:hover,body.night .outline-button:hover,body.night .icon-button:hover,body.night .notification-button:hover,body.night .profile-trigger:hover,body.night .theme-button:hover,body.night .feed-filter:hover,body.night .friend-profile-button:hover,body.night .settings-tab:hover{background:#33393f!important} body.night .primary-button,body.night .round-button,body.night .settings-tab.active,body.night .nav-item.active,body.night .feed-filter.active{border-color:#c4cad0!important;background:linear-gradient(180deg,#e0e4e7,#9da5ad)!important;color:#15181b!important;box-shadow:0 5px 14px rgba(0,0,0,.32)!important} body.night button:not(:disabled)::after{content:none!important;display:none!important} body.night button:not(:disabled):hover{filter:none!important;box-shadow:0 3px 10px rgba(0,0,0,.32)!important} body.night button:not(:disabled):active{filter:none!important;box-shadow:inset 0 2px 5px rgba(0,0,0,.34)!important} body.night .nav-item>span,body.night .field-icon,body.night .theme-button i,body.night .action-icon,body.night .contact-action i,body.night .day-card button,body.night .now-playing button,body.night .wordmark span,body.night em,body.night .profile-details-heading h3 em,body.night .people-recommendations-head h4 em{color:var(--accent)!important} body.night .profile-signals span,body.night .profile-tags span,body.night .community-owner-label,body.night .safe-note,body.night .official-updates>article,body.night .starter-goal li,body.night .social-person-card,body.night .public-profile-stats{border-color:var(--line)!important;background:#24292e!important;color:var(--muted)!important} body.night .empty-planet,body.night .friend-sculpture:before,body.night .friend-sculpture:after{background:linear-gradient(145deg,#474f57,#20262b)!important;box-shadow:none!important} @media (max-width:800px){body.night{background:#0c0e10!important}body.night .glass-card,body.night .feed-toolbar,body.night .profile-details-card,body.night .people-recommendations,body.night .friend-card,body.night .post-card{min-width:0;max-width:100%}} @media (max-width:480px){.friend-card{min-width:0;max-width:100%;overflow:hidden}.friend-card-identity{min-width:0}.friend-card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:7px}.friend-card-actions>*{min-width:0!important;justify-content:center;overflow:hidden;padding-left:7px!important;padding-right:7px!important;text-overflow:ellipsis;white-space:nowrap}.friend-card-actions .friend-status{white-space:normal;text-align:center}.people-recommendations-head{align-items:flex-start}.people-recommendations-head>span{max-width:48%;text-align:left}} /* Phone people cards: keep the person visible, then place actions below. */ @media (max-width:600px){ .friend-hub{min-height:0} .friend-card{display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-items:stretch!important;gap:10px!important;padding:10px!important} .friend-card-identity{width:100%;min-width:0!important;padding:1px 2px} .friend-card-identity>div{min-width:0} .friend-card .friend-avatar{width:38px;height:38px;flex-basis:38px} .friend-card b{font-size:11px} .friend-card small{font-size:9px} .friend-card-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;min-width:0!important;gap:7px!important;justify-content:stretch!important} .friend-card-actions button,.friend-card-actions .friend-status{display:flex!important;align-items:center;justify-content:center;width:100%!important;min-width:0!important;min-height:40px!important;margin:0!important;overflow:hidden;padding:8px!important;text-align:center;text-overflow:ellipsis;white-space:nowrap} .friend-card-actions .friend-status{grid-column:1 / -1;white-space:normal} .friend-card-actions>button:nth-child(3):last-child{grid-column:1 / -1} .people-recommendations-head{align-items:flex-start;flex-direction:column!important;gap:5px} .people-recommendations-head>span{max-width:none!important;text-align:left!important} .app-content{padding-bottom:calc(110px + env(safe-area-inset-bottom))} } /* A small profile companion: it rewards ordinary connection, never nags for it. */ .tamagotchi-card{display:grid;grid-template-columns:minmax(0,1.2fr) 155px minmax(210px,.9fr);align-items:center;gap:18px;margin-bottom:16px;padding:17px 18px;border:1px solid rgba(75,132,79,.48);border-radius:16px;background:linear-gradient(135deg,rgba(253,255,250,.84),rgba(203,239,188,.56));box-shadow:inset 0 1px rgba(255,255,255,.9),0 3px 0 rgba(44,102,55,.24)} .tamagotchi-card[hidden]{display:none}.tamagotchi-copy{min-width:0}.tamagotchi-copy .eyebrow,.tamagotchi-shop .eyebrow{margin:0 0 4px}.tamagotchi-copy h3{margin:0;color:#28583a;font:800 21px/1.05 "Trebuchet MS",Verdana,Arial,sans-serif;letter-spacing:-.03em}.tamagotchi-copy>p:not(.eyebrow){max-width:460px;margin:7px 0 0;color:#55765d;font:10px/1.45 Verdana,Arial,sans-serif}.tamagotchi-progress{display:grid;grid-template-columns:auto minmax(54px,1fr) auto;align-items:center;gap:7px;margin-top:13px;color:#4b7454;font:8px "DM Mono",monospace;text-transform:uppercase}.tamagotchi-progress>div{height:8px;overflow:hidden;border:1px solid rgba(62,123,70,.42);border-radius:99px;background:rgba(255,255,255,.52)}.tamagotchi-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#5ba85d,#b7ed90);box-shadow:inset 0 1px rgba(255,255,255,.7);transition:width .35s ease}.tamagotchi-progress b{font-weight:700;white-space:nowrap}.tamagotchi-activity{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.tamagotchi-activity span{padding:4px 6px;border:1px solid rgba(84,139,87,.34);border-radius:11px;background:rgba(255,255,255,.37);color:#637b67;font:8px Verdana,Arial,sans-serif}.tamagotchi-activity .is-complete{border-color:rgba(61,127,70,.55);background:rgba(214,246,195,.72);color:#2e7140} .tamagotchi-visual-wrap{display:grid;justify-items:center;gap:5px}.tamagotchi-sprite{position:relative;width:94px;height:102px;isolation:isolate;filter:drop-shadow(0 5px 3px rgba(31,78,39,.18));transition:transform .24s ease,filter .24s ease}.tamagotchi-card:hover .tamagotchi-sprite{transform:translateY(-2px)}.tama-shadow{position:absolute;z-index:-1;bottom:2px;left:13px;width:68px;height:13px;border-radius:50%;background:rgba(43,95,48,.19);filter:blur(1px)}.tama-body{position:absolute;z-index:2;bottom:12px;left:18px;width:58px;height:58px;border:3px solid #265d39;border-radius:23px 23px 19px 19px;background:linear-gradient(145deg,#d9f9bd,#79c66d);box-shadow:inset 5px 5px 0 rgba(255,255,255,.5),inset -5px -6px 0 rgba(48,129,63,.22),3px 3px 0 rgba(31,86,44,.28)}.stage-bud .tama-body{width:62px;height:62px;left:16px;border-radius:27px 27px 19px 19px}.stage-sprout .tama-body,.stage-grove .tama-body{width:67px;height:66px;left:13px;border-radius:31px 31px 21px 21px}.stage-grove .tama-body{background:linear-gradient(145deg,#e5ffc9,#64b96a)}.tama-ear{position:absolute;z-index:1;top:28px;width:20px;height:24px;border:3px solid #265d39;background:#a9e889;transform:rotate(45deg);box-shadow:inset 2px 2px rgba(255,255,255,.45)}.tama-ear-left{left:19px;border-radius:7px 4px}.tama-ear-right{right:18px;border-radius:4px 7px}.stage-sprout .tama-ear,.stage-grove .tama-ear{top:21px}.tama-eye{position:absolute;top:22px;width:6px;height:8px;border-radius:4px;background:#1e4d31}.tama-eye-left{left:18px}.tama-eye-right{right:18px}.tama-mouth{position:absolute;bottom:13px;left:24px;width:11px;height:6px;border-bottom:2px solid #255c37;border-radius:0 0 12px 12px}.condition-sleepy .tama-eye{top:24px;width:8px;height:3px;border-top:2px solid #1e4d31;background:transparent}.condition-sad .tama-mouth{bottom:11px;border-top:2px solid #255c37;border-bottom:0;border-radius:12px 12px 0 0}.condition-moldy .tama-body{background:linear-gradient(145deg,#a6d697,#59956a);filter:saturate(.76)}.tama-mold{display:none;position:absolute;z-index:4;width:9px;height:9px;border:2px solid #306942;border-radius:2px;background:#72b85a;box-shadow:3px 2px 0 #4e944f}.tama-mold-one{top:5px;left:2px}.tama-mold-two{right:2px;bottom:4px}.condition-moldy .tama-mold{display:block}.tama-cap,.tama-glasses,.tama-scarf{display:none;position:absolute;z-index:6}.item-moss_cap .tama-cap{display:block;top:16px;left:18px;width:58px;height:18px;border:3px solid #245a36;border-radius:17px 17px 5px 5px;background:linear-gradient(#b6ec7b,#4f9e4d);box-shadow:inset 0 3px rgba(255,255,255,.4)}.item-moss_cap .tama-cap:after{content:"";position:absolute;right:-9px;bottom:-6px;width:25px;height:8px;border:3px solid #245a36;border-radius:0 10px 10px 0;background:#70ba59}.item-leaf_glasses .tama-glasses{display:block;top:47px;left:24px;width:45px;height:12px;border-top:2px solid #245a36}.item-leaf_glasses .tama-glasses:before,.item-leaf_glasses .tama-glasses:after{content:"";position:absolute;top:-5px;width:15px;height:12px;border:3px solid #245a36;border-radius:4px;background:rgba(239,255,194,.64)}.item-leaf_glasses .tama-glasses:before{left:0}.item-leaf_glasses .tama-glasses:after{right:0}.item-pixel_scarf .tama-scarf{display:block;z-index:5;bottom:13px;left:18px;width:60px;height:13px;border:2px solid #245a36;border-radius:4px;background:repeating-linear-gradient(90deg,#f1d87c 0 6px,#759dd5 6px 12px)}.tamagotchi-wallet{margin:0;color:#326943;font:800 10px "DM Mono",monospace}.tamagotchi-wallet>span{color:#ddb842} .tamagotchi-shop{min-width:0;padding-left:15px;border-left:1px solid rgba(78,132,81,.28)}.tamagotchi-shop>div>p:not(.eyebrow){margin:0;color:#5d7961;font:9px/1.4 Verdana,Arial,sans-serif}.tamagotchi-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:9px}.tamagotchi-item{display:grid;gap:3px;min-width:0;min-height:54px;padding:6px 4px;border:1px solid rgba(82,139,85,.44);border-radius:8px;background:rgba(255,255,255,.48);color:#32663e;text-align:center;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.tamagotchi-item:hover{transform:translateY(-2px);background:rgba(252,255,247,.85);box-shadow:0 3px 0 rgba(48,103,56,.21)}.tamagotchi-item b{overflow:hidden;font:700 8px/1.25 Verdana,Arial,sans-serif;text-overflow:ellipsis;white-space:nowrap}.tamagotchi-item small{color:#618065;font:8px "DM Mono",monospace;white-space:nowrap}.tamagotchi-item.is-owned{border-color:#5b9c60;background:linear-gradient(145deg,#f7ffef,#c9ecb4)}.tamagotchi-item.is-worn{box-shadow:inset 0 0 0 1px #d2b44f,0 2px 0 rgba(48,103,56,.2)} .profile-comment-pet{border-color:rgba(85,145,81,.48)!important;background:linear-gradient(135deg,rgba(242,255,222,.78),rgba(204,241,180,.48))!important}.profile-comment-pet .profile-comment-avatar{display:grid;place-items:center;border-color:#4e9d56;background:linear-gradient(#ecffd5,#97d879)!important;color:#28613a;font:800 17px/1 Arial}.profile-comment-pet b{color:#28613a} body.night .tamagotchi-card,body.night .profile-comment-pet{border-color:rgba(226,232,237,.16)!important;background:#1a1e22!important;box-shadow:var(--shadow)!important}.tamagotchi-card{min-width:0}.tamagotchi-card *{min-width:0}body.night .tamagotchi-copy h3,body.night .tamagotchi-copy>p:not(.eyebrow),body.night .tamagotchi-progress,body.night .tamagotchi-shop>div>p:not(.eyebrow),body.night .tamagotchi-wallet,body.night .tamagotchi-item{color:var(--ink)}body.night .tamagotchi-progress>div,body.night .tamagotchi-activity span,body.night .tamagotchi-item{border-color:rgba(225,231,235,.18);background:#252a2f}body.night .tamagotchi-progress i{background:linear-gradient(90deg,#a9b1b8,#e4e8ea)}body.night .tamagotchi-activity .is-complete{border-color:#9fa8b0;background:#30363c;color:#edf0f2}body.night .tamagotchi-shop{border-left-color:rgba(225,231,235,.14)}body.night .tamagotchi-item.is-owned{background:#30363c;border-color:#aab3ba}body.night .tamagotchi-item.is-worn{box-shadow:inset 0 0 0 1px #e0e4e7,0 2px 0 rgba(0,0,0,.3)}body.night .tamagotchi-sprite{filter:grayscale(.75) drop-shadow(0 5px 3px rgba(0,0,0,.34))}body.night .tama-body,body.night .tama-ear{border-color:#a9b1b8;background:linear-gradient(145deg,#d3d8dc,#737c84)}body.night .tama-eye,body.night .tama-mouth{border-color:#30363b;background:#30363b}body.night .tama-mouth{background:transparent}.body.night .tama-shadow{background:rgba(0,0,0,.28)}body.night .profile-comment-pet .profile-comment-avatar{border-color:#aab3ba!important;background:#30363c!important;color:#edf0f2}body.night .profile-comment-pet b{color:var(--ink)} @media (max-width:900px){.tamagotchi-card{grid-template-columns:minmax(0,1fr) 130px;gap:14px}.tamagotchi-shop{grid-column:1 / -1;padding:12px 0 0;border-top:1px solid rgba(78,132,81,.25);border-left:0}.tamagotchi-shop>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.tamagotchi-items{max-width:430px}} @media (max-width:600px){.tamagotchi-card{grid-template-columns:minmax(0,1fr);padding:14px;margin-bottom:11px;gap:12px}.tamagotchi-copy h3{font-size:19px}.tamagotchi-visual-wrap{grid-row:1;justify-items:start;grid-template-columns:94px auto;align-items:center}.tamagotchi-wallet{margin-left:8px}.tamagotchi-shop{grid-column:auto;padding-top:11px}.tamagotchi-shop>div{display:block}.tamagotchi-items{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}.tamagotchi-item{min-height:48px}.tamagotchi-progress{grid-template-columns:auto minmax(0,1fr) auto}.tamagotchi-activity span{font-size:8px}} body.night .tama-shadow{background:rgba(0,0,0,.28)} /* Night mode: soft graphite contrast for long, comfortable reading. */ body.night{--ink:#e5e9eb;--muted:#b9c1c6;--accent:#d1d7da;background:#111417!important} body.night .glass-card,body.night .feed-toolbar,body.night .profile-details-card,body.night .people-recommendations,body.night .friend-card,body.night .post-card{background:#1a1f23!important} body.night .app-shell :is(p,small,label,li,time,td,th,.eyebrow,.handle,.settings-action-copy,.profile-community-empty,.profile-detail-empty,.platform-listening-note,.day-card-zone,.friend-card-handle,.social-person-reason){color:#c8cfd3!important} body.night .app-shell :is(h1,h2,h3,h4,h5,b,strong,.nav-item,.settings-tab,.contact-action,.friend-card b,.social-person-identity b,.profile-community-card b,.post-card-author b,.profile-comment-item b){color:#e5e9eb!important} body.night .app-shell :is(input,textarea,select){color:#e5e9eb!important} body.night .app-shell :is(input,textarea)::placeholder{color:#9ea8ae!important;opacity:1} body.night .app-shell .nav-item.active,body.night .app-shell .settings-tab.active,body.night .app-shell .primary-button,body.night .app-shell .round-button,body.night .app-shell .feed-filter.active{border-color:#7f878d!important;background:linear-gradient(180deg,#555d64,#373e44)!important;color:#f2f4f5!important} /* A focused, familiar full-screen conversation on phones. */ .mobile-message-header{display:none}.message-send-row{display:contents} @media (max-width:700px){ body:has(#messageDialog[open]){overflow:hidden} #messageDialog.message-modal[open]{position:fixed;inset:0;width:100vw;max-width:none;height:100svh;max-height:none;min-height:100svh;box-sizing:border-box;margin:0;padding:calc(15px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom));border:0;border-radius:0;background:linear-gradient(160deg,#f6fff1,#d7f0d2);box-shadow:none;display:flex;flex-direction:column;overflow:hidden} #messageDialog.message-modal::before,#messageDialog.message-modal>.eyebrow,#messageDialog.message-modal>h3{display:none} #messageDialog.message-modal::backdrop{background:transparent;backdrop-filter:none} #messageDialog.message-modal .close-modal{position:absolute;z-index:3;top:calc(15px + env(safe-area-inset-top));right:16px;width:40px;height:40px;border-radius:13px;font-size:26px;box-shadow:0 2px 0 rgba(47,104,55,.26)} #messageDialog .no-friends-note{margin-top:58px} #messageDialog #messageComposer{display:flex!important;flex:1;min-height:0;flex-direction:column} #messageDialog .mobile-message-header{display:flex;align-items:center;gap:10px;min-height:47px;padding:2px 52px 11px 0;border-bottom:1px solid rgba(80,137,82,.3)} .mobile-message-avatar{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border:1px solid #5b9861;border-radius:13px;background:linear-gradient(#fbfff7,#b7e5ab);background-size:cover;background-position:center;color:#245f35;font:800 13px Verdana} .mobile-message-header>div{display:grid;min-width:0;gap:1px}.mobile-message-header small{color:#5a7960;font:8px "DM Mono",monospace;letter-spacing:.07em;text-transform:uppercase}.mobile-message-header b,.mobile-message-header span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-message-header b{color:#245438;font:800 15px/1.12 "Trebuchet MS",Verdana,sans-serif}.mobile-message-header span{color:#638269;font:9px Verdana,Arial,sans-serif} #messageDialog .message-label{display:block;margin:9px 0 6px;font-size:0} #messageDialog .message-label select{width:100%;min-height:37px;margin:0;padding:8px 10px;border-radius:10px;border-color:rgba(88,146,92,.52);background:rgba(255,255,255,.68);color:#315f3e;font:12px Verdana,Arial,sans-serif} #messageDialog .message-thread{flex:1;min-height:0;max-height:none;margin:4px -4px 8px;padding:11px 5px;border:0;border-radius:0;background:transparent;overscroll-behavior:contain} #messageDialog .message-empty{align-self:center;margin:auto 10px;padding:15px;border:1px solid rgba(103,157,105,.35);border-radius:14px;background:rgba(255,255,255,.42);font-size:11px;line-height:1.5} #messageDialog .message-bubble{max-width:min(82%,320px);padding:10px 12px;border-radius:15px 15px 15px 4px;font-size:12px;line-height:1.5;box-shadow:0 1px 0 rgba(55,111,59,.12)} #messageDialog .message-bubble.mine{border-radius:15px 15px 4px 15px;background:linear-gradient(#efffe8,#bce8ae)} #messageDialog .message-send-row{display:flex;align-items:flex-end;gap:8px;flex:0 0 auto;padding-top:9px;border-top:1px solid rgba(80,137,82,.28)} #messageDialog .message-send-row textarea{height:46px;min-height:46px;margin:0;padding:12px;border-radius:15px;font-size:16px;line-height:1.2} #messageDialog .message-send-row .primary-button{width:46px;height:46px;min-width:46px;margin:0;padding:0;border-radius:15px;font-size:0;justify-content:center} #messageDialog .message-send-row .primary-button span{display:block;font-size:20px;line-height:1} body.night #messageDialog.message-modal[open]{background:#15191d;border:0} body.night #messageDialog .mobile-message-header,body.night #messageDialog .message-send-row{border-color:rgba(223,230,235,.16)} body.night #messageDialog .mobile-message-header b{color:#e5e9eb}body.night #messageDialog .mobile-message-header small,body.night #messageDialog .mobile-message-header span{color:#b9c1c6} body.night #messageDialog .mobile-message-avatar{border-color:#68737c;background:#2d343a;color:#e5e9eb} body.night #messageDialog .message-label select{border-color:rgba(223,230,235,.2);background:#22282d;color:#e5e9eb} body.night #messageDialog .message-thread{background:transparent}body.night #messageDialog .message-bubble{border-color:rgba(223,230,235,.16);background:#252b30;color:#e1e5e7;box-shadow:none}body.night #messageDialog .message-bubble.mine{background:#343b41} body.night #messageDialog .message-send-row textarea{border-color:rgba(223,230,235,.2);background:#22282d;color:#e5e9eb}body.night #messageDialog .message-send-row .primary-button{border-color:#79838b!important;background:linear-gradient(#5a646c,#3b434a)!important;color:#f1f3f4!important} } /* Dense three-column Home and Profile: a compact 2007 Groven, not a copy of another network. */ .home-rail-links{display:grid;gap:5px;padding:11px;border:1px solid rgba(82,136,84,.42);border-radius:10px;background:rgba(253,255,249,.6)} .home-rail-links .eyebrow{margin:0 0 3px}.home-rail-links button{display:grid;grid-template-columns:25px minmax(0,1fr) auto;align-items:center;gap:7px;width:100%;padding:7px 6px;border:1px solid transparent;border-radius:6px;background:transparent;color:#315f3e;text-align:left}.home-rail-links button:hover{border-color:rgba(77,137,81,.48);background:rgba(255,255,255,.56)}.home-rail-links b{font:700 10px Verdana,Arial,sans-serif}.home-rail-links i{font:12px Arial,sans-serif;color:#4d8754}.home-rail-icon{display:grid;place-items:center;width:23px;height:23px;border:1px solid rgba(75,134,80,.44);border-radius:6px;background:linear-gradient(#fbfff7,#c8edbc);color:#2f7441;font-size:13px;font-style:normal} @media (min-width:801px){ .app-screen{max-width:1390px;padding:14px;gap:12px} .sidebar{width:208px;min-height:calc(100vh - 28px);padding:12px 10px} .app-content{width:min(1125px,calc(100vw - 248px));padding:0 2px 54px} .app-header{min-height:70px;margin-bottom:9px;padding:8px 14px} .app-header h2{font-size:25px}.app-header>div:first-child,.header-actions{margin-top:13px} .page{padding:0} #homePage .welcome-ribbon{min-height:38px;padding:8px 11px;border-radius:8px} #homePage .next-step-card{margin-top:9px;padding:10px 12px;gap:10px} #homePage .next-step-number{width:33px;height:33px} #homePage .next-step-card h3{font-size:15px} #homePage .next-step-card p:not(.eyebrow){font-size:10px} #homePage .next-step-card .primary-button{min-height:33px;padding:7px 9px;font-size:9px} #homePage .home-grid{grid-template-columns:minmax(0,1fr) 222px;gap:10px;margin-top:10px;align-items:start} #homePage .home-side{gap:10px} #homePage .composer{padding:10px;border-radius:10px} #homePage .composer-window-title{margin:0 0 7px;padding:4px 6px} #homePage .composer-top{padding:1px 3px 8px} #homePage .composer-top button{padding:8px 10px} #homePage .composer-actions{padding:7px 3px 1px} #homePage .emoji-dock{padding:6px 3px 0} #homePage .feed-toolbar{margin-top:10px;padding:10px 11px;border-radius:10px} #homePage .feed-toolbar h3{font-size:16px} #homePage .feed-filter{min-height:30px;padding:6px 9px} #homePage .post-feed{gap:9px;margin-top:9px} #homePage .post-card{border-radius:9px} #homePage .post-card-head{padding:7px 9px} #homePage .post-card-body{padding:10px 11px 4px;font-size:11px;line-height:1.55} #homePage .day-card,#homePage .onboarding{padding:12px;border-radius:10px} #homePage .day-card-clock{margin:10px 0;font-size:35px} #homePage .day-card>p:not(.eyebrow){margin:0 0 8px;font-size:10px} #homePage .onboarding-progress{margin:9px 0;height:6px} #homePage .onboarding ul{gap:6px;font-size:9px} #homePage .empty-feed{min-height:250px;padding:20px 16px;border-radius:10px} #homePage .empty-planet{width:92px;height:92px;margin-bottom:12px} #homePage .empty-planet:after{width:123px;height:24px;top:34px;left:-17px} #homePage .empty-planet div{top:31px;left:35px;font-size:18px} #homePage .empty-feed h3{font-size:22px} #homePage .empty-feed>p:not(.eyebrow){margin:9px auto;font-size:10px} #profilePage.active-page{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:10px;align-items:start} #profilePage #profileHero{grid-column:1 / -1;min-height:0;padding:30px 20px 16px;border-radius:10px} #profilePage .profile-identity{gap:12px} #profilePage .large-avatar{width:67px;height:67px} #profilePage .profile-identity h3{font-size:27px} #profilePage .profile-cover-note{top:8px;right:11px} #profilePage .profile-bio{max-width:560px;margin:16px 0 13px;font-size:11px;line-height:1.5} #profilePage .profile-stats{gap:6px} #profilePage .profile-stats>.profile-stat,#profilePage .profile-stat-button{min-height:29px;padding:4px 7px;font-size:9px} #profilePage .profile-layout{display:contents} #profilePage .profile-placeholder{grid-column:1;grid-row:2;min-height:125px;padding:17px;border-radius:10px} #profilePage .profile-placeholder:before{margin:-3px 0 10px;padding:3px 8px} #profilePage .profile-placeholder h3{margin:0 0 12px;font-size:22px} #profilePage .now-playing{grid-column:2;grid-row:2;min-height:0;padding:14px 12px;border-radius:10px} #profilePage .now-playing .record{width:42px;height:42px;margin:8px auto;font-size:17px} #profilePage .now-playing h4{margin:0 0 8px;font-size:15px;line-height:1.08} #profilePage .now-playing button{font-size:9px} #profilePage .profile-details-card{grid-column:1;grid-row:3;margin:0;padding:14px;border-radius:10px} #profilePage .profile-details-heading h3{font-size:19px} #profilePage .profile-details-grid{gap:6px;margin-top:11px} #profilePage .profile-details-grid article{min-height:60px;padding:8px;border-radius:7px} #profilePage .profile-details-grid p{margin-top:4px;font-size:10px} #profilePage .profile-community-head{margin-top:11px;padding-top:9px} #profilePage .profile-community-list{gap:5px;margin-top:7px} #profilePage .profile-community-card{padding:8px 9px;border-radius:7px} #profilePage #profilePosts{grid-column:1;grid-row:4;margin-top:0} #profilePage .profile-guestbook{grid-column:1;grid-row:5;margin-top:0;padding:14px;border-radius:10px} #profilePage .profile-guestbook-copy{margin:7px 0} #profilePage .profile-guestbook-comments{gap:5px;max-height:230px} #profilePage .profile-comment-item{padding:7px} #profilePage #tamagotchiPanel{grid-column:2;grid-row:3 / span 3;display:block;margin:0;padding:13px;border-radius:10px} #profilePage .tamagotchi-copy h3{font-size:16px} #profilePage .tamagotchi-copy>p:not(.eyebrow){font-size:9px} #profilePage .tamagotchi-progress{margin-top:9px} #profilePage .tamagotchi-activity{margin-top:8px} #profilePage .tamagotchi-visual-wrap{grid-template-columns:78px auto;justify-items:start;align-items:center;margin:8px 0 4px} #profilePage .tamagotchi-sprite{width:76px;height:82px;transform:scale(.81);transform-origin:left center;margin-right:-14px} #profilePage .tamagotchi-wallet{font-size:9px} #profilePage .tamagotchi-shop{margin-top:9px;padding:9px 0 0;border-top:1px solid rgba(78,132,81,.28);border-left:0} #profilePage .tamagotchi-items{margin-top:7px} #profilePage .tamagotchi-item{min-height:46px;padding:5px 2px} } body.night .home-rail-links{border-color:rgba(227,238,230,.16);background:#1a1f23} body.night .home-rail-links button:hover{border-color:rgba(227,238,230,.26);background:#272d32} body.night .home-rail-icon{border-color:#768087;background:#30373d;color:#e1e5e7} /* Home and Profile: pale grey cards with a small apple-green window cap. */ body:not(.night) #homePage :is(.next-step-card,.day-card,.onboarding,.home-rail-links,.feed-toolbar,.today-prompt,.empty-feed,.post-card), body:not(.night) #profilePage :is(.profile-hero,.profile-placeholder,.now-playing,.profile-details-card,.profile-guestbook,.tamagotchi-card,.post-card){ border-color:#8fa997; background:linear-gradient(180deg,#c5efb8 0 8px,#f9fbfa 8px 100%)!important; box-shadow:inset 0 1px rgba(255,255,255,.96),0 3px 0 rgba(47,102,58,.28),0 10px 18px rgba(42,76,49,.12); } body:not(.night) #homePage .post-card-head{background:linear-gradient(180deg,#eaffe5,#dfe5e0)!important;border-bottom-color:#b7c8ba} body:not(.night) #homePage .post-card-body,body:not(.night) #profilePage .post-card-body{color:#36523d} body:not(.night) #homePage .composer{border-color:#7b9e83;background:linear-gradient(180deg,#d9f5d0 0 7px,#eef1ef 7px 100%)} body:not(.night) #homePage .composer-top button{background:#fff;color:#6c7a70} body:not(.night) #homePage .feed-toolbar,body:not(.night) #homePage .today-prompt{background:linear-gradient(180deg,#c5efb8 0 8px,#f2f4f2 8px 100%)!important} body:not(.night) #homePage .day-card,body:not(.night) #homePage .onboarding,body:not(.night) #homePage .home-rail-links{background:linear-gradient(180deg,#c5efb8 0 8px,#eff2f0 8px 100%)!important} body:not(.night) #homePage .home-rail-links button:hover{background:#fff} body:not(.night) #profilePage .profile-aurora{opacity:.12;filter:grayscale(.2)} body:not(.night) #profilePage .profile-placeholder:before{background:linear-gradient(#fdfefd,#d5e3d6)} body:not(.night) #profilePage .profile-details-grid article,body:not(.night) #profilePage .profile-community-card,body:not(.night) #profilePage .profile-comment-item{border-color:#b3c4b5;background:#f1f4f2} body:not(.night) #profilePage .tamagotchi-shop{border-color:#c3d0c5} body:not(.night) #profilePage .tamagotchi-item{border-color:#b7c6b9;background:#edf1ee} /* Quiet the surface: motion stays, but the glossy white streaks are gone. */ .film-grain,button:not(:disabled)::after{display:none!important;content:none!important} button:not(:disabled):hover{filter:none} /* A restrained Zen-corner frame. It stays behind the app and disappears before it can crowd a phone. */ .bamboo-grove{display:none} @media (min-width:1050px){ .bamboo-grove{display:block;position:fixed;z-index:0;bottom:-42px;width:135px;height:78vh;pointer-events:none;opacity:.32} .bamboo-grove-left{left:-25px}.bamboo-grove-right{right:-25px;transform:scaleX(-1)} .bamboo-grove::before,.bamboo-grove::after{content:'';position:absolute;bottom:0;width:15px;height:108%;border:1px solid rgba(32,100,48,.45);border-radius:16px;background:repeating-linear-gradient(180deg,#5d9d56 0 46px,#e0f0ce 47px 51px,#63a35c 52px 97px);box-shadow:inset 2px 0 rgba(236,255,218,.42)} .bamboo-grove::before{left:40px;transform:rotate(-3deg)}.bamboo-grove::after{left:88px;height:82%;transform:rotate(5deg)} .bamboo-grove span{position:absolute;z-index:1;display:block;width:54px;height:15px;border-radius:100% 0 100% 0;background:linear-gradient(90deg,#4c914d,#a5dd88);box-shadow:inset 1px 1px rgba(239,255,225,.55)} .bamboo-grove span:nth-child(1){left:1px;bottom:59%;transform:rotate(-25deg)}.bamboo-grove span:nth-child(2){left:62px;bottom:72%;transform:rotate(24deg)} .bamboo-grove span:nth-child(3){left:7px;bottom:31%;transform:rotate(-18deg)}.bamboo-grove span:nth-child(4){left:72px;bottom:43%;transform:rotate(32deg)} } @media (max-width:1049px){.bamboo-grove{display:none!important}} body.night .bamboo-grove{opacity:.12;filter:grayscale(1)} /* Grovie is a small profile companion, not a separate game screen. */ .grovie-card{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:11px;align-items:center;margin:12px 0;padding:15px;border:1px solid rgba(75,132,79,.44);border-radius:16px;background:linear-gradient(180deg,rgba(207,242,194,.82) 0 8px,rgba(252,255,250,.77) 8px 100%);box-shadow:inset 0 1px rgba(255,255,255,.88),0 4px 0 rgba(46,101,55,.26),0 10px 20px rgba(40,78,46,.11)} .grovie-card[hidden]{display:none}.grovie-copy .eyebrow{margin:0 0 5px}.grovie-heading{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.grovie-heading h3{margin:0;color:#245d3a;font-size:20px;line-height:1}.grovie-heading span{padding:3px 7px;border:1px solid rgba(67,128,74,.42);border-radius:999px;background:#f8fff4;color:#397445;font:700 8px Verdana,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase}.grovie-species{margin:6px 0 0;color:#52735a;font:10px Verdana,Arial,sans-serif}.grovie-message{margin:9px 0 0;color:#315f3e;font-size:12px;line-height:1.4}.grovie-visual-wrap{display:grid;place-items:center;min-height:93px}.grovie-sprite{position:relative;width:88px;height:82px;filter:drop-shadow(0 6px 4px rgba(34,80,40,.17));transition:transform .25s ease}.grovie-sprite:hover{transform:translateY(-3px) rotate(-2deg)}.grovie-body{position:absolute;z-index:2;left:17px;top:17px;width:57px;height:53px;border:2px solid #326642;border-radius:47% 53% 50% 50%;background:radial-gradient(circle at 32% 25%,#f7ffe9 0 10%,transparent 11%),linear-gradient(145deg,#c5f39c,#72bc70);box-shadow:inset -7px -8px rgba(38,115,61,.16),inset 2px 2px rgba(255,255,255,.7)}.grovie-eye{position:absolute;top:22px;width:5px;height:8px;border-radius:50%;background:#254d32}.grovie-eye::after{content:'';position:absolute;top:1px;left:1px;width:2px;height:2px;border-radius:50%;background:#fff}.eye-left{left:17px}.eye-right{right:17px}.grovie-body em{position:absolute;left:24px;top:35px;width:10px;height:5px;border-bottom:2px solid #2d6b41;border-radius:0 0 10px 10px}.grovie-leaf{position:absolute;z-index:1;top:3px;width:25px;height:39px;border:2px solid #397845;border-radius:100% 0 100% 0;background:linear-gradient(135deg,#efffcd,#7ccc73);transform-origin:bottom}.leaf-one{left:25px;transform:rotate(-26deg)}.leaf-two{left:46px;transform:rotate(27deg) scaleX(-1)}.grovie-shadow{position:absolute;z-index:0;bottom:2px;left:12px;width:67px;height:11px;border-radius:50%;background:rgba(38,85,45,.2);filter:blur(2px)}.grovie-sprite.mood-sleepy,.grovie-sprite.mood-asleep{opacity:.72;transform:translateY(4px) rotate(4deg)}.grovie-sprite.mood-dirty .grovie-body{background:radial-gradient(circle at 64% 54%,#6a9255 0 5%,transparent 6%),radial-gradient(circle at 35% 75%,#537d4f 0 5%,transparent 6%),linear-gradient(145deg,#b5da95,#6b9f68)}.grovie-sprite.mood-bored .grovie-body em{border-radius:10px 10px 0 0;border-bottom:0;border-top:2px solid #2d6b41}.grovie-sprite.rarity-rare .grovie-body{box-shadow:0 0 0 3px rgba(130,207,247,.35),inset -7px -8px rgba(38,115,61,.16),inset 2px 2px rgba(255,255,255,.7)}.grovie-sprite.rarity-epic .grovie-body{box-shadow:0 0 0 3px rgba(188,151,249,.34),inset -7px -8px rgba(38,115,61,.16),inset 2px 2px rgba(255,255,255,.7)}.grovie-sprite.rarity-legendary .grovie-body,.grovie-sprite.rarity-secret .grovie-body{box-shadow:0 0 0 3px rgba(246,198,86,.4),inset -7px -8px rgba(38,115,61,.16),inset 2px 2px rgba(255,255,255,.7)} .grovie-care{grid-column:1 / -1;display:grid;gap:9px}.grovie-needs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.grovie-need{display:grid;gap:4px;min-width:0}.grovie-need span{overflow:hidden;color:#55765c;font:8px Verdana,Arial,sans-serif;text-overflow:ellipsis;white-space:nowrap}.grovie-need>i{display:block;height:5px;overflow:hidden;border:1px solid rgba(73,133,78,.35);border-radius:8px;background:rgba(255,255,255,.65)}.grovie-need b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#77bd72,#b6e780)}.grovie-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.grovie-actions button{min-height:32px;padding:6px 5px;border:1px solid #5c9d67;border-radius:8px;background:linear-gradient(#f9fff6,#c9eec2);box-shadow:inset 0 1px #fff,0 2px 0 #4a8055;color:#285c3a;font:700 9px Verdana,Arial,sans-serif;cursor:pointer}.grovie-actions button:active{transform:translateY(1px);box-shadow:inset 0 1px #fff,0 1px 0 #4a8055} @media (min-width:801px){#profilePage #groviePanel{grid-column:2;grid-row:3 / span 3;display:grid;margin:0;padding:13px;border-radius:10px}#profilePage .grovie-card{grid-template-columns:1fr 80px;gap:7px}#profilePage .grovie-heading h3{font-size:16px}#profilePage .grovie-message{font-size:10px}.grovie-visual-wrap{min-height:70px}.grovie-sprite{transform:scale(.78);transform-origin:center}.grovie-needs{grid-template-columns:repeat(2,minmax(0,1fr))}.grovie-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.grovie-actions button{min-height:29px;font-size:8px}} @media (max-width:480px){.grovie-card{grid-template-columns:minmax(0,1fr) 82px;gap:6px;margin:9px 0;padding:11px;border-radius:13px}.grovie-heading h3{font-size:18px}.grovie-message{font-size:11px}.grovie-visual-wrap{min-height:76px}.grovie-sprite{transform:scale(.79);transform-origin:center}.grovie-needs{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.grovie-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.grovie-actions button{min-height:38px;font-size:10px}} body.night .grovie-card{border-color:#566067;background:linear-gradient(180deg,#424a50 0 7px,#252b30 7px 100%);box-shadow:inset 0 1px rgba(255,255,255,.06),0 3px 0 #15191d,0 9px 18px rgba(0,0,0,.24)}body.night .grovie-heading h3,body.night .grovie-message{color:#edf0f1}body.night .grovie-species,body.night .grovie-need span{color:#bac2c5}body.night .grovie-heading span,body.night .grovie-actions button{border-color:#69747b;background:linear-gradient(#4b555c,#343c42);box-shadow:inset 0 1px rgba(255,255,255,.08),0 2px 0 #1b2024;color:#f2f4f5}body.night .grovie-need>i{border-color:#5f6a70;background:#1d2226}#tamagotchiPanel{display:none!important} /* Groven's light theme uses cool grey cybercore surfaces rather than white cards. */ body:not(.night) :is(.glass-card,.post-card,.composer,.feed-toolbar,.today-prompt){border-color:#879690!important;background:linear-gradient(180deg,#bce9a7 0 8px,#d8dcda 8px 100%)!important;box-shadow:inset 0 1px rgba(255,255,255,.72),0 3px 0 rgba(56,82,64,.31),0 10px 18px rgba(34,47,39,.14)!important} body:not(.night) :is(input,textarea,select){border-color:#98a49e;background:#e3e6e4!important;color:#284235}body:not(.night) :is(.profile-details-grid article,.profile-community-card,.profile-comment-item,.friend-card,.message-bubble){background:#cfd4d1!important;border-color:#9da7a1!important} body:not(.night) #homePage :is(.next-step-card,.day-card,.onboarding,.home-rail-links,.feed-toolbar,.today-prompt,.empty-feed,.post-card),body:not(.night) #profilePage :is(.profile-hero,.profile-placeholder,.now-playing,.profile-details-card,.profile-guestbook,.grovie-card,.post-card){background:linear-gradient(180deg,#bce9a7 0 8px,#d3d7d5 8px 100%)!important;border-color:#879690!important} /* User-owned pixel Grovie collection artwork. */ .grovie-sprite{display:grid;place-items:center;width:104px;height:104px;overflow:hidden;border:1px solid rgba(67,104,73,.48);border-radius:13px;background:linear-gradient(145deg,#dfe3df,#aeb8b1);box-shadow:inset 0 1px rgba(255,255,255,.76),0 4px 0 rgba(43,78,52,.22)}.grovie-sprite>*:not(.grovie-art){display:none}.grovie-art{display:block;position:relative!important;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;mix-blend-mode:multiply;filter:contrast(1.08) saturate(.82)}.grovie-sprite.mood-asleep .grovie-art,.grovie-sprite.mood-sleepy .grovie-art{filter:grayscale(.18) brightness(.8)}.grovie-sprite.rarity-rare{border-color:#7aa8b6}.grovie-sprite.rarity-epic{border-color:#a18cb7}.grovie-sprite.rarity-legendary{border-color:#c5a85e}.grovie-sprite.rarity-secret{border-color:#8d779d} body.night .grovie-sprite{border-color:#657078;background:#30373c;box-shadow:inset 0 1px rgba(255,255,255,.08),0 3px 0 #171b1e}body.night .grovie-art{filter:grayscale(.3) contrast(1.08) brightness(.86)} @media (max-width:480px){.grovie-card{grid-template-columns:minmax(0,1fr) 92px}.grovie-sprite{width:86px;height:86px;border-radius:11px}.grovie-art{image-rendering:pixelated}.grovie-care{gap:8px}.grovie-actions button{min-height:40px}} /* Compact profile and a clearer apple-green window cap. */ body:not(.night) :is(.glass-card,.post-card,.composer,.feed-toolbar,.today-prompt){background:linear-gradient(180deg,#8fc983 0 9px,#d8dcda 9px 100%)!important} body:not(.night) #homePage :is(.next-step-card,.day-card,.onboarding,.home-rail-links,.feed-toolbar,.today-prompt,.empty-feed,.post-card),body:not(.night) #profilePage :is(.profile-hero,.profile-placeholder,.now-playing,.profile-details-card,.profile-guestbook,.grovie-card,.post-card){background:linear-gradient(180deg,#8fc983 0 9px,#d3d7d5 9px 100%)!important} #profilePage .profile-hero{min-height:0!important;padding:18px 20px 14px!important} #profilePage .profile-bio{margin:14px 0 12px!important} #profilePage .profile-aurora{height:135%;opacity:.08} /* Grovin shop: real server-backed inventory, kept compact on every screen. */ .profile-shop{margin-top:12px;padding:15px;border:1px solid #879690;border-radius:14px;background:linear-gradient(180deg,#8fc983 0 9px,#d3d7d5 9px 100%)!important;box-shadow:inset 0 1px rgba(255,255,255,.72),0 3px 0 rgba(56,82,64,.31),0 10px 18px rgba(34,47,39,.14)} .profile-shop[hidden]{display:none}.profile-shop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.profile-shop-head .eyebrow{margin-bottom:5px}.profile-shop-head h3{margin:0;color:#214b34;font:700 22px/1.05 "Trebuchet MS",Verdana,sans-serif}.profile-shop-head h3 em{color:#3f8049}.profile-shop-head>div:first-child>p:last-child{max-width:530px;margin:8px 0 0;color:#52645a;font-size:11px;line-height:1.45}.grovin-wallet{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:5px;min-width:94px;padding:8px 10px;border:1px solid #779a7d;border-radius:10px;background:#e9edea;box-shadow:inset 0 1px rgba(255,255,255,.82),0 2px 0 rgba(66,103,72,.22)}.grovin-wallet>span{grid-row:1 / span 2;color:#3d8a4b;font-size:18px}.grovin-wallet b{color:#244b33;font:800 17px/1 "DM Mono",monospace}.grovin-wallet small{color:#57705e;font:8px "DM Mono",monospace;text-transform:uppercase} .shop-tabs{display:flex;gap:6px;overflow:auto;margin:14px 0 10px;padding-bottom:2px;scrollbar-width:none}.shop-tabs::-webkit-scrollbar{display:none}.shop-tabs button{flex:0 0 auto;padding:7px 10px;border:1px solid #8ba38f;border-radius:999px;background:#e5e9e6;color:#36573f;font:700 9px Verdana,Arial,sans-serif}.shop-tabs button.active{border-color:#528c5d;background:linear-gradient(#efffeb,#b5e4ad);box-shadow:0 2px 0 #52815a;color:#204e30}.shop-founder-note{margin:4px 0 10px;padding:8px 10px;border-left:3px solid #4e9559;background:rgba(236,255,227,.46);color:#315f3e;font-size:10px;line-height:1.45}.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.shop-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0;padding:9px;border:1px solid #a0aba4;border-radius:10px;background:#e1e5e2}.shop-item-visual{display:grid;place-items:center;width:32px;height:32px;border:1px solid #85a38b;border-radius:8px;background:linear-gradient(#f8fff5,#bee7b6);color:#2b7040;font-size:16px}.shop-item>div:nth-child(2){display:grid;gap:3px;min-width:0}.shop-item b{overflow:hidden;color:#294e35;font:700 10px Verdana,Arial,sans-serif;text-overflow:ellipsis;white-space:nowrap}.shop-item small{display:-webkit-box;overflow:hidden;color:#66766c;font-size:9px;line-height:1.25;-webkit-line-clamp:2;-webkit-box-orient:vertical}.shop-item-controls button{min-height:29px;padding:6px 8px;border:1px solid #5e9567;border-radius:7px;background:linear-gradient(#fbfff8,#c4ebbd);box-shadow:0 2px 0 #527b58;color:#245d37;font:700 8px Verdana,Arial,sans-serif;white-space:nowrap}.shop-item-controls button:disabled{border-color:#9fa8a1;background:#d1d7d2;box-shadow:none;color:#617168;cursor:default} .grovie-founder-picker{width:100%;min-height:30px;border:1px dashed #63956a;border-radius:7px;background:#e6eee8;color:#2d6740;font:700 8px Verdana,Arial,sans-serif}.grovie-card[data-room="room_moss_bed"]{background:linear-gradient(180deg,#8fc983 0 9px,#d3d7d5 9px 73%,#b5d8a9 73% 100%)!important}.grovie-card[data-room="room_pixel_lamp"]{background:linear-gradient(180deg,#8fc983 0 9px,#d3d7d5 9px 100%)!important;box-shadow:inset 0 0 34px rgba(244,236,161,.48),0 3px 0 rgba(56,82,64,.31),0 10px 18px rgba(34,47,39,.14)!important}.grovie-card[data-room="room_window_garden"]{background:linear-gradient(180deg,#8fc983 0 9px,#d3d7d5 9px 100%)!important;background-image:linear-gradient(180deg,#8fc983 0 9px,rgba(211,215,213,.93) 9px 100%),radial-gradient(circle at 92% 34%,rgba(144,205,126,.58) 0 32px,transparent 33px)!important} .grovie-sprite{isolation:isolate}.grovie-art{z-index:1}.grovie-sprite[data-outfit]::before,.grovie-sprite[data-outfit]::after{position:absolute;z-index:2;content:"";pointer-events:none}.grovie-sprite[data-outfit="outfit_moss_cap"]::before{top:10px;left:21%;width:58%;height:19%;border:2px solid #4f704d;border-radius:8px 9px 3px 3px;background:linear-gradient(#9fc879,#587d56);box-shadow:0 3px 0 #3e653f}.grovie-sprite[data-outfit="outfit_leaf_glasses"]::after{top:42%;left:21%;width:57%;height:14%;border-top:3px solid #285d39;border-bottom:3px solid #285d39;border-radius:6px;box-shadow:inset 9px 0 rgba(207,246,180,.46),inset -9px 0 rgba(207,246,180,.46)}.grovie-sprite[data-outfit="outfit_pixel_scarf"]::after{bottom:19%;left:20%;width:60%;height:12%;border:2px solid #609166;border-radius:3px;background:repeating-linear-gradient(90deg,#d2e98d 0 5px,#6d9d6e 5px 10px)} body.profile-skin-mist #profilePage .profile-hero{background:linear-gradient(180deg,#96cd88 0 9px,#c8d3d0 9px 100%)!important}body.profile-skin-graphite #profilePage .profile-hero{background:linear-gradient(180deg,#799a7d 0 9px,#aab1ae 9px 100%)!important} body.night .profile-shop{border-color:#566067;background:linear-gradient(180deg,#41494f 0 8px,#252b30 8px 100%)!important;box-shadow:inset 0 1px rgba(255,255,255,.06),0 3px 0 #15191d,0 9px 18px rgba(0,0,0,.24)}body.night .profile-shop-head h3,body.night .shop-item b,body.night .grovin-wallet b{color:#eef1f2}body.night .profile-shop-head>div:first-child>p:last-child,body.night .shop-item small,body.night .grovin-wallet small{color:#bcc5c9}body.night .grovin-wallet,body.night .shop-item{border-color:#5d676d;background:#30373c}body.night .shop-tabs button,body.night .grovie-founder-picker{border-color:#68737a;background:#343c42;color:#e8ebed}body.night .shop-tabs button.active,body.night .shop-item-controls button{border-color:#768087;background:linear-gradient(#58626a,#3b4349);box-shadow:0 2px 0 #1a1e22;color:#f1f3f4}body.night .shop-item-visual{border-color:#67737a;background:#3b444a;color:#edf0f2}body.night .shop-founder-note{background:#2b3237;color:#d4dbde} @media (min-width:801px){#profilePage .profile-shop{grid-column:1 / -1;grid-row:6;margin:0;padding:13px;border-radius:10px}} @media (max-width:640px){#profilePage .profile-hero{padding:15px 13px 12px!important}.profile-shop{margin-top:9px;padding:11px;border-radius:12px}.profile-shop-head{align-items:flex-start}.profile-shop-head h3{font-size:18px}.profile-shop-head>div:first-child>p:last-child{font-size:10px}.grovin-wallet{min-width:76px;padding:7px}.shop-grid{grid-template-columns:1fr}.shop-item{grid-template-columns:34px minmax(0,1fr) auto;padding:9px}.shop-item-controls button{min-width:56px;font-size:8px}.shop-tabs{margin-top:11px}.profile-shop{overflow:hidden}} /* Grovie collection: user-owned source art is kept intact as a CSS sprite sheet. */ .grovie-art,.grovie-room-art,.shop-grovie-visual{display:block;background-repeat:no-repeat;background-image:url('assets/grovie/collection.png');background-size:624px 390px;image-rendering:pixelated;filter:contrast(1.13) saturate(1.07)} .grovie-art{width:100%;height:100%;background-position:center}:is(.grovie-art,.grovie-room-art,.shop-grovie-visual)[data-art="mosslet"]{background-image:url('assets/grovie/mosslet.png');background-size:cover;background-position:center}:is(.grovie-art,.grovie-room-art,.shop-grovie-visual)[data-art="dewbit"]{background-image:url('assets/grovie/dewbit.png');background-size:cover;background-position:center}:is(.grovie-art,.grovie-room-art,.shop-grovie-visual)[data-art="puffern"]{background-image:url('assets/grovie/puffern.png');background-size:cover;background-position:center}:is(.grovie-art,.grovie-room-art,.shop-grovie-visual)[data-art="fernix"]{background-image:url('assets/grovie/fernix.png');background-size:cover;background-position:center}:is(.grovie-art,.grovie-room-art,.shop-grovie-visual)[data-art="glowlume"]{background-image:url('assets/grovie/glowlume.png');background-size:cover;background-position:center} :is(.grovie-art,.grovie-room-art,.shop-grovie-visual)[data-art="nyx"]{background-position:-101px -70px}:is(.grovie-art,.grovie-room-art,.shop-grovie-visual)[data-art="static"]{background-position:-199px -82px}:is(.grovie-art,.grovie-room-art,.shop-grovie-visual)[data-art="split"]{background-position:-390px -76px}:is(.grovie-art,.grovie-room-art,.shop-grovie-visual)[data-art="rad"]{background-position:-488px -79px}:is(.grovie-art,.grovie-room-art,.shop-grovie-visual)[data-art="malware"]{background-position:-117px -220px}:is(.grovie-art,.grovie-room-art,.shop-grovie-visual)[data-art="void"]{background-position:-269px -221px}:is(.grovie-art,.grovie-room-art,.shop-grovie-visual)[data-art="walle"]{background-position:-480px -217px} .shop-grovie-visual{overflow:hidden;background-color:#d9e1db;background-position:center}.shop-grovie-visual[data-art="mosslet"],.shop-grovie-visual[data-art="dewbit"],.shop-grovie-visual[data-art="puffern"],.shop-grovie-visual[data-art="fernix"],.shop-grovie-visual[data-art="glowlume"]{background-size:cover} .grovie-sprite{overflow:visible}.grovie-sprite .grovie-art{overflow:hidden;border-radius:11px}.grovie-rename{display:grid;place-items:center;width:21px;height:21px;padding:0;border:1px solid #779a7d;border-radius:7px;background:#edf2ee;color:#365f42;font-size:12px;cursor:pointer}.grovie-rename:active{transform:translateY(1px)} .grovie-sprite[data-outfit]::before,.grovie-sprite[data-outfit]::after{z-index:4}.grovie-sprite[data-outfit="outfit_moss_cap"]::before{top:1px;left:18%;width:64%;height:22%;border:2px solid #405c47;border-radius:13px 13px 4px 4px;background:linear-gradient(180deg,#b7d786 0 45%,#527851 46% 100%);box-shadow:0 3px 0 #35583d}.grovie-sprite[data-outfit="outfit_leaf_glasses"]::after{top:38%;left:18%;width:64%;height:18%;border:0;border-radius:10px;background:radial-gradient(circle at 25% 50%,rgba(206,244,177,.62) 0 22%,#2e5e3d 24% 31%,transparent 33%),radial-gradient(circle at 75% 50%,rgba(206,244,177,.62) 0 22%,#2e5e3d 24% 31%,transparent 33%),linear-gradient(#2e5e3d,#2e5e3d) center/22% 3px no-repeat}.grovie-sprite[data-outfit="outfit_pixel_scarf"]::after{bottom:11%;left:15%;width:70%;height:14%;border:2px solid #436d4b;border-radius:3px;background:repeating-linear-gradient(90deg,#d8ed93 0 6px,#7ea66d 6px 12px);box-shadow:0 2px 0 rgba(47,91,55,.35)} .grovie-sprite[data-species="nyx"][data-outfit="outfit_moss_cap"]::before{top:0;left:23%;width:52%}.grovie-sprite[data-species="static"][data-outfit="outfit_leaf_glasses"]::after{top:36%;left:20%}.grovie-sprite[data-species="dewbit"][data-outfit="outfit_pixel_scarf"]::after{bottom:16%;left:18%;width:64%}.grovie-sprite[data-species="walle"][data-outfit="outfit_moss_cap"]::before{top:11%;left:25%;width:50%}.grovie-sprite[data-species="void"][data-outfit="outfit_leaf_glasses"]::after{top:49%} @keyframes grovie-breathe{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-4px) rotate(-1.5deg)}}@keyframes room-grovie-breathe{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-5px)}} .grovie-sprite:not(.mood-asleep):not(.mood-sleepy){animation:grovie-breathe 3.4s ease-in-out infinite}.grovie-sprite.mood-bored{animation:none}.grovie-room{grid-column:1 / -1;min-width:0;margin-top:2px;padding:8px;border:1px solid #93a79a;border-radius:10px;background:#cdd3cf}.grovie-room-head{display:flex;align-items:baseline;gap:6px;min-width:0;margin:0 1px 6px;color:#355b40}.grovie-room-head>span{font-size:12px}.grovie-room-head b{font:700 10px Verdana,Arial,sans-serif}.grovie-room-head small{overflow:hidden;margin-left:auto;color:#5d7164;font-size:8px;text-align:right;text-overflow:ellipsis;white-space:nowrap}.grovie-room-stage{position:relative;height:144px;overflow:hidden;border:1px solid #8a9e91;border-radius:8px;background:linear-gradient(180deg,#dfe4e0 0 66%,#b6c2b8 67% 100%);box-shadow:inset 0 1px rgba(255,255,255,.8)}.grovie-room-stage::before{position:absolute;z-index:1;right:9%;bottom:24%;width:34%;height:2px;background:#8fa497;box-shadow:0 7px 0 #8fa497,0 14px 0 #8fa497;content:"";opacity:.52}.grovie-room-stage::after{position:absolute;z-index:1;bottom:0;left:0;width:100%;height:27%;background:repeating-linear-gradient(90deg,rgba(112,135,117,.15) 0 1px,transparent 1px 26px)}.room-window,.room-bed,.room-lamp,.room-plant,.room-console{position:absolute;z-index:2;display:none}.room-window{top:13px;right:13px;width:37px;height:38px;border:3px solid #7c9783;border-radius:4px;background:linear-gradient(90deg,transparent 47%,#7c9783 48% 53%,transparent 54%),linear-gradient(#dff1d8,#a5d29c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}.room-bed{bottom:13px;left:14px;width:68px;height:29px;border:3px solid #698c70;border-radius:6px 6px 3px 3px;background:linear-gradient(#e8f0cf 0 35%,#9dc787 36% 100%);box-shadow:inset 0 6px #e8f0cf}.room-lamp{right:19px;bottom:18px;width:5px;height:45px;border-radius:3px;background:#617c69;box-shadow:0 -31px 0 9px #d9e689,0 -31px 0 12px rgba(243,245,175,.42)}.room-plant{left:18px;bottom:18px;width:20px;height:36px;border-radius:50% 50% 42% 42%;background:radial-gradient(ellipse at 20% 78%,#508f55 0 20%,transparent 22%),radial-gradient(ellipse at 83% 42%,#73af61 0 25%,transparent 27%),radial-gradient(ellipse at 48% 16%,#9acb76 0 29%,transparent 31%);filter:drop-shadow(0 2px 0 #5a765e)}.room-console{right:15px;bottom:19px;width:48px;height:29px;border:3px solid #60746a;border-radius:5px;background:linear-gradient(#b9d3ab 0 10px,#60746a 11px 13px,#9fa8a3 14px);box-shadow:inset 0 0 0 2px #e3f1d6}.grovie-room-art{position:absolute;z-index:3;bottom:4px;left:52%;width:104px;height:108px;border:0;background-color:transparent;animation:room-grovie-breathe 3.4s ease-in-out infinite}.grovie-room-stage[data-room~="room_moss_bed"] .room-bed,.grovie-room-stage[data-room~="room_pixel_lamp"] .room-lamp,.grovie-room-stage[data-room~="room_window_garden"] .room-window{display:block}.grovie-room-stage[data-room~="room_window_garden"] .room-plant{display:block}.grovie-room-stage[data-room~="room_starter_studio"]{background:linear-gradient(180deg,#d4ddd6 0 66%,#aabbb0 67% 100%)}.grovie-room-stage[data-room~="room_starter_studio"] .room-bed,.grovie-room-stage[data-room~="room_starter_studio"] .room-lamp{display:block}.grovie-room-stage[data-room~="room_bamboo_loft"]{background:radial-gradient(circle at 85% 18%,rgba(208,241,180,.72) 0 18px,transparent 19px),linear-gradient(180deg,#d3e0d1 0 66%,#aec29e 67% 100%)}.grovie-room-stage[data-room~="room_bamboo_loft"] .room-window,.grovie-room-stage[data-room~="room_bamboo_loft"] .room-bed,.grovie-room-stage[data-room~="room_bamboo_loft"] .room-plant{display:block}.grovie-room-stage[data-room~="room_neon_den"]{background:linear-gradient(180deg,#48514f 0 66%,#2f3835 67% 100%)}.grovie-room-stage[data-room~="room_neon_den"]::before{background:#a3d378;box-shadow:0 7px 0 #a3d378,0 14px 0 #a3d378}.grovie-room-stage[data-room~="room_neon_den"] .room-console,.grovie-room-stage[data-room~="room_neon_den"] .room-lamp{display:block}.grovie-room-stage[data-room~="room_neon_den"] .grovie-room-art{filter:contrast(1.15) saturate(1.12) drop-shadow(0 0 7px rgba(169,233,111,.32))} body.night .grovie-rename{border-color:#657077;background:#343c42;color:#eef1f2}body.night .grovie-room{border-color:#59646a;background:#30373b}body.night .grovie-room-head{color:#e7ebec}body.night .grovie-room-head small{color:#b4bec2}body.night .grovie-room-stage{border-color:#59656b;background:linear-gradient(180deg,#343d41 0 66%,#252c2f 67% 100%)}body.night .grovie-room-stage:not([data-room~="room_neon_den"]) .grovie-room-art{filter:grayscale(.18) brightness(.92) contrast(1.08)} @media (max-width:480px){.grovie-room{margin-top:0;padding:7px}.grovie-room-stage{height:142px}.grovie-room-head small{max-width:58%}.grovie-room-art{left:54%;width:102px;height:106px}.shop-grovie-visual{width:32px;height:32px}} @media (prefers-reduced-motion:reduce){.grovie-sprite,.grovie-room-art{animation:none!important}} @keyframes grovie-breathe-small{0%,100%{transform:scale(.78) translateY(0) rotate(0deg)}50%{transform:scale(.78) translateY(-4px) rotate(-1.5deg)}} @media (min-width:801px){.grovie-sprite:not(.mood-asleep):not(.mood-sleepy){animation-name:grovie-breathe-small}} .grovie-art{mix-blend-mode:normal}.shop-grovie-visual{background-size:192px 120px}.shop-grovie-visual[data-art="nyx"]{background-position:-16px -13px}.shop-grovie-visual[data-art="static"]{background-position:-55px -15px}.shop-grovie-visual[data-art="split"]{background-position:-112px -13px}.shop-grovie-visual[data-art="rad"]{background-position:-142px -14px}.shop-grovie-visual[data-art="malware"]{background-position:-20px -55px}.shop-grovie-visual[data-art="void"]{background-position:-69px -55px}.shop-grovie-visual[data-art="walle"]{background-position:-136px -54px} body.profile-skin-mist #profilePage :is(.profile-hero,.profile-details-card,.profile-placeholder,.now-playing){background:linear-gradient(180deg,#a4d497 0 9px,#c4cfcc 9px 100%)!important}body.profile-skin-graphite #profilePage :is(.profile-hero,.profile-details-card,.profile-placeholder,.now-playing){border-color:#65736c!important;background:linear-gradient(180deg,#657c6a 0 9px,#aeb6b2 9px 100%)!important} /* The Grovie room stays visible instead of being squeezed into the profile sidebar. */ @media (min-width:801px){ #profilePage #groviePanel{grid-column:1 / -1!important;grid-row:6!important;grid-template-columns:minmax(0,1fr) 128px minmax(340px,1.25fr)!important;column-gap:14px!important;align-items:start} #profilePage .profile-shop{grid-row:7!important} #profilePage #groviePanel .grovie-copy{grid-column:1} #profilePage #groviePanel .grovie-visual-wrap{grid-column:2;grid-row:1;min-height:94px} #profilePage #groviePanel .grovie-care{grid-column:1 / 3} #profilePage #groviePanel .grovie-room{grid-column:3;grid-row:1 / span 2;margin:0} #profilePage #groviePanel .grovie-sprite{transform:scale(.96)} } @media (max-width:800px){ #profilePage #groviePanel .grovie-room{display:block!important;visibility:visible;grid-column:1 / -1;width:100%;margin-top:8px} #profilePage #groviePanel .grovie-room-stage{min-height:150px} } /* Wearables are compact and anchored to the head or neck, never the torso or feet. */ .grovie-sprite[data-outfit="outfit_leaf_glasses"]::after{ top:26%!important;bottom:auto!important;left:28%!important;width:44%!important;height:12%!important;border:0!important;border-radius:7px!important; background:radial-gradient(circle at 24% 50%,rgba(206,244,177,.55) 0 18%,#2e5e3d 20% 28%,transparent 31%),radial-gradient(circle at 76% 50%,rgba(206,244,177,.55) 0 18%,#2e5e3d 20% 28%,transparent 31%),linear-gradient(#2e5e3d,#2e5e3d) center/21% 2px no-repeat!important; box-shadow:none!important } .grovie-sprite[data-outfit="outfit_pixel_scarf"]::after{ top:51%!important;bottom:auto!important;left:29%!important;width:42%!important;height:8%!important;border:1px solid #436d4b!important;border-radius:6px!important; background:repeating-linear-gradient(90deg,#d8ed93 0 5px,#7ea66d 5px 10px)!important;box-shadow:0 1px 0 rgba(47,91,55,.28)!important } .grovie-sprite[data-species="mosslet"][data-outfit="outfit_leaf_glasses"]::after,.grovie-sprite[data-species="static"][data-outfit="outfit_leaf_glasses"]::after{top:29%!important} .grovie-sprite[data-species="dewbit"][data-outfit="outfit_leaf_glasses"]::after,.grovie-sprite[data-species="glowlume"][data-outfit="outfit_leaf_glasses"]::after{top:23%!important;left:30%!important;width:40%!important} .grovie-sprite[data-species="void"][data-outfit="outfit_leaf_glasses"]::after{top:31%!important} .grovie-sprite[data-species="dewbit"][data-outfit="outfit_pixel_scarf"]::after,.grovie-sprite[data-species="glowlume"][data-outfit="outfit_pixel_scarf"]::after{top:46%!important;left:33%!important;width:34%!important} /* Grovie pixel-sprite runtime: hard pixels, transparent frames, no photo interpolation. */ .grovie-pixel-sprite,.grovie-placeholder-sprite{background-color:transparent!important;background-repeat:no-repeat!important;image-rendering:pixelated!important;image-rendering:crisp-edges!important} .grovie-pixel-sprite{border:0!important;border-radius:0!important;filter:none!important;will-change:background-position} .grovie-sprite:has(>.grovie-pixel-sprite){width:160px;height:160px;animation:none!important;transform:none!important;filter:none} .grovie-sprite:has(>.grovie-pixel-sprite):hover{transform:none!important} .grovie-sprite>.grovie-pixel-sprite{width:100%;height:100%;overflow:visible!important} .grovie-room-stage{height:220px} .grovie-room-art.grovie-pixel-sprite{left:58%;bottom:-3px;width:220px;height:220px;animation:none!important;transform:translateX(-50%)} .shop-item-grovie{grid-template-columns:64px minmax(0,1fr) auto} .shop-item-grovie .shop-item-visual{width:64px;height:64px} .shop-item-grovie .shop-grovie-visual.grovie-pixel-sprite{background-size:400% 400%!important} @media (min-width:801px){ #profilePage #groviePanel{grid-template-columns:minmax(0,1fr) 172px minmax(340px,1.25fr)!important} #profilePage #groviePanel .grovie-visual-wrap{min-height:160px} } @media (max-width:800px){ .grovie-sprite:has(>.grovie-pixel-sprite){width:144px;height:144px} #profilePage #groviePanel .grovie-room-stage{height:194px;min-height:194px} .grovie-room-art.grovie-pixel-sprite{left:59%;bottom:-2px;width:194px;height:194px} .shop-item-grovie{grid-template-columns:56px minmax(0,1fr) auto} .shop-item-grovie .shop-item-visual{width:56px;height:56px} } @media (prefers-reduced-motion:reduce){.grovie-pixel-sprite{will-change:auto}.grovie-sprite:has(>.grovie-pixel-sprite){animation:none!important}} /* A little more contrast in the original light theme without changing its Groven palette. */ body:not(.night):not(.gray){--ink:#173a27;--muted:#526e5a;--accent:#2d7043;--line:rgba(49,105,59,.42);--glass:rgba(235,247,231,.76);--glass-strong:rgba(247,252,244,.88);--shadow:0 13px 32px rgba(36,78,45,.18),inset 0 1px 0 rgba(255,255,255,.82);background:radial-gradient(circle at 15% 20%,#eff9d4 0,transparent 23%),radial-gradient(circle at 87% 80%,#bce4a8 0,transparent 25%),linear-gradient(135deg,#add59f,#cfe9c8 46%,#e7f0df)} body:not(.night):not(.gray) .glass-card{border-color:rgba(53,107,62,.43)}