/* Underlife design tokens */
:root{--bg:#F7F6F2;--card:#FFFFFF;--elev:#EFEEE9;--ink:#111111;--soft:#656560;--muted:#999994;--line:rgba(0,0,0,.08);
--or:#FF6A00;--or2:#F45D00;--or-text:#B84700;--on-ink:#F7F6F2;--sh:none;
--serif:Literata,Georgia,serif;--sans:Inter,-apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif;
--r-sm:12px;--r-md:20px;--r-lg:28px;--s-sm:12px;--s-md:24px;--s-lg:48px;--s-xl:96px;--ease:cubic-bezier(.2,.7,.2,1)}
:root[data-theme=dark]{--bg:#090909;--card:#181818;--elev:#202020;--ink:#F5F5F2;--soft:#A5A5A0;--muted:#6F6F6A;--line:rgba(255,255,255,.08);--or-text:#FF7E26;--on-ink:#111111}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#090909;--card:#181818;--elev:#202020;--ink:#F5F5F2;--soft:#A5A5A0;--muted:#6F6F6A;--line:rgba(255,255,255,.08);--or-text:#FF7E26;--on-ink:#111111}}
*{box-sizing:border-box}html{scroll-behavior:smooth}[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.65 var(--sans);-webkit-font-smoothing:antialiased;transition:background-color 1s,color 1s}
body.cinema{--bg:#090909;--card:#181818;--elev:#202020;--ink:#F5F5F2;--soft:#A5A5A0;--muted:#6F6F6A;--line:rgba(255,255,255,.08);--or-text:#FF7E26;--on-ink:#111}
h1,h2,h3,h4,blockquote{font-family:var(--serif);font-weight:450;letter-spacing:-.025em;line-height:1.1;margin-top:0}
a{color:var(--or-text);text-underline-offset:3px}a:focus-visible,button:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.eyebrow{font:500 .75rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
/* floating header */
header{position:sticky;top:12px;z-index:20;width:min(1200px,calc(100% - 24px));margin:12px auto 0;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 10px 8px 24px}
.logo{font:600 .9rem var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--ink);text-decoration:none}.logo span{color:var(--or)}
nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
nav a{padding:7px 16px;border-radius:999px;color:var(--soft);text-decoration:none;font-weight:500;font-size:.9rem;white-space:nowrap;transition:color .3s,background .3s}
nav a:hover{color:var(--ink)}nav a[aria-current]{background:var(--ink);color:var(--on-ink)}
.theme{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);font-size:1rem;cursor:pointer;flex:none}
/* hero */
.hero{padding:var(--s-xl) 0 120px}
.hero h1{font-size:clamp(3.4rem,9vw,8.5rem);max-width:11ch;margin:0 0 var(--s-md);line-height:.98}
.hero p{max-width:52ch;color:var(--soft);font-size:1.2rem}
.btn{display:inline-block;background:var(--ink);color:var(--on-ink);padding:13px 26px;border-radius:999px;text-decoration:none;border:1px solid var(--ink);font:500 .95rem var(--sans);cursor:pointer;margin:6px 10px 6px 0;transition:background .3s,color .3s,border-color .3s}
.btn:hover{background:var(--or);border-color:var(--or);color:#fff}
.btn.alt{background:transparent;color:var(--ink);border-color:var(--line)}.btn.alt:hover{border-color:var(--or);color:var(--or-text);background:transparent}
section{padding:64px 0}section h2{font-size:clamp(2.2rem,4vw,3.6rem);margin:0 0 12px}
.lead{color:var(--soft);max-width:60ch;margin-bottom:var(--s-md)}
.qotd{border-left:2px solid var(--or);padding:4px 0 4px 24px;margin:0}
.qotd blockquote{font-size:clamp(1.6rem,3vw,2.4rem);margin:0 0 10px}.qotd cite{color:var(--soft);font-style:normal;font-size:.9rem}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:26px;transition:border-color .3s}
a.card:hover{border-color:var(--or)}
.card h3{margin:10px 0 4px;font-size:1.7rem}.card p{margin:6px 0;color:var(--soft)}.card .sub{color:var(--or-text);font-weight:500;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;margin-top:0}
.tag{display:inline-block;font:500 .72rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.filters button{border:1px solid var(--line);background:none;color:var(--ink);border-radius:999px;padding:8px 18px;font:500 .9rem var(--sans);cursor:pointer;transition:.3s}
.filters button:hover{border-color:var(--or)}.filters button[aria-pressed=true]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.page-head{padding:72px 0 6px}.page-head h1{font-size:clamp(3rem,7vw,6rem);margin:0 0 12px}
.top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.done{border:1px solid var(--line);border-radius:999px;padding:6px 14px;background:none;color:var(--soft);font:500 .8rem var(--sans);cursor:pointer}
.done[aria-pressed=true]{background:var(--or);border-color:var(--or);color:#fff}.item.is-done{opacity:.7}
.progress{display:flex;align-items:center;gap:14px;margin-bottom:20px;font-weight:500}
.bar{flex:1;height:3px;border-radius:99px;background:var(--line);overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--or);transition:width .6s var(--ease)}
.cheer{text-align:center;font:1.8rem var(--serif);padding:24px 0}
.island-bar{display:flex;justify-content:center;padding-top:16px}
.island{background:#111;color:#F5F5F2;border:1px solid rgba(255,255,255,.1);border-radius:28px;padding:10px 20px;font:500 .95rem var(--sans);cursor:pointer;display:flex;flex-direction:column;align-items:center;min-width:180px;transition:min-width .5s var(--ease),padding .5s,border-radius .5s}
.island .more{max-height:0;opacity:0;overflow:hidden;font-weight:400;font-size:.9rem;transition:max-height .5s,opacity .5s,margin .5s}
.island.open{min-width:min(440px,92vw);padding:14px 26px;border-radius:34px}.island.open .more{max-height:60px;opacity:1;margin-top:6px}
.banner{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:40px 36px;margin:22px 0 0}
.banner h1{margin:0 0 8px;font-size:clamp(2.4rem,5vw,4rem)}.banner p{margin:0;max-width:50ch;color:var(--soft)}
.moods{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0}
.moods button{background:none;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 2px;font:500 .82rem var(--sans);color:var(--ink);cursor:pointer}
.moods b{display:block;font-size:1.8rem;font-weight:400}.moods button[aria-pressed=true]{border-color:var(--or);background:var(--elev)}
textarea{width:100%;font:inherit;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);color:var(--ink);resize:vertical}
.msg{color:var(--soft);margin:10px 0 0}
.note{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 20px;margin-bottom:12px;border-left:3px solid var(--c,var(--or))}
.note .meta{display:flex;justify-content:space-between;font-weight:500;font-size:.9rem}.note time{color:var(--soft);font-weight:400}.note p{margin:6px 0 0;white-space:pre-wrap}
.person{display:flex;gap:14px;align-items:center}
.ava{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--elev)!important;color:var(--ink);font:1.5rem var(--serif)}
.person .btn{padding:7px 16px;font-size:.88rem;margin:6px 0 0}.person p{margin:0}
footer{padding:0 0 28px;color:var(--soft);font-size:.9rem}
.sec-title{font-size:1.8rem;margin:8px 0 14px}
.cats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cat{position:relative;text-align:left;border:1px solid var(--line);border-radius:var(--r-md);padding:22px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:4px;min-height:170px;transition:border-color .3s}
.cat:hover{border-color:var(--or)}.cat .ic{display:none}.cat b{font:1.9rem var(--serif);margin-top:0}.cat .d{font-size:.92rem;color:var(--soft);line-height:1.4}.cat .n{margin-top:auto;padding-top:8px;font-size:.8rem;color:var(--muted)}
.cat .car{position:absolute;top:20px;right:22px;color:var(--or);transition:transform .3s}.cat.active{border-color:var(--or)}.cat.active .car{transform:rotate(180deg)}
#panel{margin-top:18px}.panel-in{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px 8px;animation:drop .6s var(--ease)}
.panel-in h2{margin:0 0 6px;font-size:2.2rem}.filters small{opacity:.6;margin-left:2px}
.links{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.links a{padding:6px 14px;border-radius:999px;border:1px solid var(--line);color:var(--ink);font-weight:500;font-size:.85rem;text-decoration:none;transition:.3s}
.links a:hover{border-color:var(--or);color:var(--or-text)}.panel-in .grid{padding-bottom:18px}
@keyframes drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){.hero{animation:rise 1.2s ease-out}@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}
@media (max-width:640px){header{top:8px}header .wrap{padding-left:16px}.logo{letter-spacing:.18em}.hero{padding:56px 0 80px}.moods{gap:5px}.cats{grid-template-columns:1fr 1fr}.cat{min-height:140px;padding:16px}.cat .d{display:none}.wrap{padding:0 20px}}

/* Community: compact top + mood colors */
.cm-banner{padding:20px 26px;margin-top:14px}.cm-banner h1{font-size:clamp(1.7rem,3.4vw,2.3rem);margin-bottom:4px}.cm-banner p{font-size:.95rem}
.cm-mood{padding:18px 22px}.cm-mood h2{font-size:1.2rem;margin-bottom:0}.cm-mood .moods{margin:10px 0;gap:6px}
.cm-mood .moods button{padding:6px 2px;font-size:.76rem;transition:background .2s,border-color .2s}.cm-mood .moods b{font-size:1.35rem}
.cm-mood .moods button:hover{border-color:var(--c)}
.cm-mood .moods button[aria-pressed=true]{border-color:var(--c);background:color-mix(in srgb,var(--c) 28%,var(--card))}
.cm-mood textarea{min-height:0}.cm-mood .msg{margin:8px 0 0}

/* Explore: People · Films · Books · Quotes, then Talks + Practices centred beneath */
@media(min-width:900px){.cats{grid-template-columns:repeat(4,1fr)}.cats .cat:nth-child(5){grid-column:2}.cats .cat:nth-child(6){grid-column:3}}

/* dialogs (ulConfirm / ulAlert) */
.ul-dlg-ov{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:rgba(10,10,10,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .2s}
.ul-dlg-ov.on{opacity:1}
.ul-dlg{width:min(440px,100%);background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 30px 26px;text-align:center;box-shadow:0 30px 80px -20px rgba(0,0,0,.35);transform:translateY(12px) scale(.97);transition:transform .25s var(--ease)}
.ul-dlg-ov.on .ul-dlg{transform:none}
.ul-dlg h2{font-size:2rem;margin:0 0 10px}
.ul-dlg p{margin:0 0 24px;color:var(--soft);font-size:1rem;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere;user-select:text}
.ul-dlg-bar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.ul-dlg-bar .btn{margin:0;min-width:120px;text-align:center}
.btn.danger{background:#C8402F;border-color:#C8402F;color:#fff}.btn.danger:hover{background:#A93323;border-color:#A93323;color:#fff}
body.ul-dlg-open{overflow:hidden}
/* header right group + account switcher */
header .hr{display:flex;align-items:center;gap:8px;flex:none}
.acc{position:relative}.acc-b{display:flex;align-items:center;gap:6px;height:36px;padding:0 10px 0 4px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--soft);cursor:pointer;transition:.2s}.acc-b:hover,.acc-b[aria-expanded=true]{color:var(--ink);border-color:var(--or)}
.acc-av{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;overflow:hidden;flex:none;background:linear-gradient(135deg,var(--or),var(--or2));color:#fff;font:600 .78rem var(--sans);font-style:normal}.acc-av img{width:100%;height:100%;object-fit:cover}
.acc-m{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:260px;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 24px 60px -18px rgba(0,0,0,.35)}
.acc-m p{margin:4px 10px 6px;font:500 .7rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.acc-m button,.acc-m a{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:12px;background:none;color:var(--ink);text-align:left;font:inherit;font-size:.92rem;text-decoration:none;cursor:pointer;transition:background .15s}
.acc-m button:hover,.acc-m a:hover,.acc-m button:focus-visible,.acc-m a:focus-visible{background:var(--elev);outline:0}.acc-m button.on{background:color-mix(in srgb,var(--or) 10%,transparent)}
.acc-m span{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}.acc-m b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acc-m small{color:var(--muted);font-size:.78rem;overflow:hidden;text-overflow:ellipsis}.acc-m em{color:var(--or-text);font-style:normal}
.acc-m a{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 12px 12px;color:var(--or-text);padding-top:12px}
@media (max-width:640px){.acc-m{position:fixed;right:12px;left:12px;top:70px;width:auto}}
.acc-r{display:flex;align-items:center;gap:2px}.acc-r>button:first-child{flex:1;min-width:0}.acc-m .acc-rm{width:30px;flex:none;justify-content:center;padding:6px 0;color:var(--muted);font-size:1.1rem}.acc-m .acc-rm:hover{color:var(--ink)}

/* footer */
.ft{margin-top:64px;position:relative;padding-top:40px}
.ft::before{content:"";position:absolute;top:0;left:max(12px,calc((100% - 1200px)/2));right:max(12px,calc((100% - 1200px)/2));height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 22%,transparent) 15%,color-mix(in srgb,var(--ink) 22%,transparent) 85%,transparent)}
.ft-sos{border:1px solid var(--line);background:var(--card);border-radius:var(--r-md,20px);padding:26px 28px;position:relative;overflow:hidden}
.ft-sos::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--or)}
.ft-sos-h{display:flex;gap:16px;align-items:flex-start}
.ft-ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--or) 14%,transparent);color:var(--or-text)}
.ft-sos h2{font:1.35rem/1.25 var(--serif);margin:0 0 4px;color:var(--ink)}
.ft-sos-h p{margin:0;max-width:640px;line-height:1.5}
.ft-steps{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.ft-steps li{display:flex;gap:12px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px;transition:border-color .25s,transform .25s}
.ft-steps li:hover{border-color:var(--or);transform:translateY(-2px)}
.ft-steps i{flex:none;min-width:26px;height:26px;border-radius:999px;display:grid;place-items:center;padding:0 6px;background:var(--ink);color:var(--on-ink);font:600 .72rem var(--sans);font-style:normal}
.ft-steps b{display:block;color:var(--ink);font-weight:600;font-size:.9rem;margin-bottom:2px}
.ft-steps span{display:block;font-size:.84rem;line-height:1.45}
html[lang=ru] .ft-us{display:none}
.ft-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:22px 4px 0}
.ft-brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ft-brand b{font:600 .85rem var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--ink)}
.ft-brand span{color:var(--muted);font-size:.85rem}
.ft-sup{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:10px 20px;font:500 .9rem var(--sans);cursor:pointer;transition:border-color .25s,color .25s,transform .2s}
.ft-sup svg{color:var(--or);transition:transform .3s}
.ft-sup:hover{border-color:var(--or);color:var(--or-text)}.ft-sup:hover svg{transform:scale(1.2)}.ft-sup:active{transform:scale(.97)}
.ft-sup:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.ft-toast{position:fixed;left:50%;bottom:28px;z-index:70;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:var(--on-ink);padding:11px 20px;border-radius:999px;font:500 .9rem var(--sans);transition:opacity .3s,transform .3s}
.ft-toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:560px){.ft-sos{padding:20px 18px}.ft-bar{flex-direction:column;align-items:flex-start}.ft-sos-h{flex-direction:column;gap:10px}}
@media(prefers-reduced-motion:reduce){.ft-steps li,.ft-sup,.ft-sup svg,.ft-toast{transition:none}}

/* staff button */
.stf{position:relative}
.stf-b{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;display:grid;place-items:center;font-size:1rem;line-height:1;transition:border-color .2s,transform .2s}
.stf-b:hover,.stf-b[aria-expanded=true]{border-color:var(--or);transform:translateY(-1px)}
.stf-b:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.stf-m{width:290px;animation:stf-in .22s cubic-bezier(.2,1,.3,1) both}
.stf-m a{margin-top:0;border-top:0;border-radius:12px;color:var(--ink);padding:10px;align-items:center}
.stf-m a+a{margin-top:2px}
.stf-m a[aria-current]{background:color-mix(in srgb,var(--or) 10%,transparent)}
.stf-e{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--elev);font-size:1.1rem;font-style:normal}
@keyframes stf-in{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.stf-m{animation:none}}
@media(max-width:640px){.stf-m{position:fixed;right:12px;left:12px;top:70px;width:auto}}