/* Theme and recommendation carousel */
:root{--surface:#14191e;--secondary:#a9b1bb;--soft:#ffffff08}html[data-theme=light]{color-scheme:light;--bg:#f3f5f7;--text:#1e2933;--muted:#66727e;--secondary:#536272;--line:#25364b16;--accent:#20734f;--surface:#ffffffba;--soft:#172d4506}body{transition:background .25s,color .25s}html[data-theme=dark]{--bg:#12171d;--text:#f2f5f7;--line:#ffffff18}html[data-theme=light] body:before{background:radial-gradient(ellipse at 75% 0,#b9d5ec55,transparent 60%),radial-gradient(ellipse at 5% 30%,#dbd4f04a,transparent 45%)}.nav .theme-toggle{display:block!important;white-space:nowrap;border:1px solid var(--line);padding:9px 12px;border-radius:20px;font-size:12px;color:var(--text)}.nav{gap:20px}.admin-link{font-size:12px;color:var(--secondary)}.recommend{padding:40px 0 32px}.rec-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.rec-heading h1{font-size:36px;letter-spacing:-1px;margin:12px 0}.rec-heading .intro{font-size:12px}.carousel-controls{display:flex;gap:8px}.carousel-controls button{border:1px solid var(--line);background:var(--surface);width:36px;height:36px;border-radius:50%}.carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:22px;overscroll-behavior-x:contain}.carousel::-webkit-scrollbar{display:none}.rec-card{position:relative;flex:0 0 calc((100% - 32px)/3);scroll-snap-align:start;border:1px solid var(--line);background:linear-gradient(135deg,var(--surface),var(--soft));border-radius:22px;padding:26px;min-width:0;backdrop-filter:blur(20px)}.rec-top{display:flex;justify-content:space-between;align-items:center}.rec-card img{height:66px;width:66px;border-radius:20px;object-fit:cover;background:var(--soft)}.rec-index{font-size:10px;letter-spacing:2px;color:var(--muted)}.rec-card h3{font-size:22px;font-weight:550;margin:20px 0 8px}.rec-card p{color:var(--secondary);font-size:12px;line-height:1.8;height:44px;overflow:hidden}.rec-card .rec-action{display:flex;justify-content:space-between;align-items:center;margin-top:20px;font-size:12px;color:var(--accent)}.rec-card .rec-action button{color:var(--text);padding:8px 0}.carousel-dots{display:flex;justify-content:center;gap:7px;margin-top:17px}.carousel-dots button{width:7px;height:7px;padding:0;background:var(--muted);opacity:.3;border-radius:6px;transition:.2s}.carousel-dots button.active{width:22px;background:var(--accent);opacity:1}.card{background:linear-gradient(130deg,var(--surface),var(--soft));border-color:var(--line)}.bio,.detail p,.intro{color:var(--secondary)}.handle,.chip,.sort,.sectiontop p,.footer,.cardfooter,.resultline{color:var(--muted)}.followers,.footer-brand{color:var(--text)}.tag{border-color:var(--line);background:var(--soft);color:var(--secondary)}.tag:first-child{color:var(--accent);background:var(--soft)}.search{background:var(--surface);border-color:var(--line)}.search input{color:var(--text)}.chip.active{background:var(--text);color:var(--bg)}.chip:hover{color:var(--text);background:var(--soft)}.chip.active:hover{background:var(--text);color:var(--bg)}.cardfooter{border-color:var(--line)}.card:hover{background:var(--surface);border-color:var(--muted)}.save.saved{color:var(--accent)}.sort option{background:var(--bg);color:var(--text)}dialog{background:var(--bg);border-color:var(--line)}.detail-action{border-color:var(--line);background:var(--surface)}html[data-theme=light] .bottomnav{background:#f6f8fae6;border-color:var(--line)}html[data-theme=light] .bottomnav button.active{color:#206d4c}html[data-theme=light] .nav .active{color:#1e2933}html[data-theme=light] .toast{background:#e7efe9ed;color:#234934;border-color:#23493426}.detail-note{color:var(--muted)!important}.empty{color:var(--muted)}.demo-label{color:var(--accent)}
@media(max-width:900px){.rec-card{flex-basis:calc((100% - 16px)/2)}}@media(max-width:620px){.nav{gap:10px}.admin-link{font-size:11px}.brand{font-size:12px}.nav .theme-toggle{font-size:11px;padding:8px 10px}.recommend{padding:30px 0}.rec-heading h1{font-size:30px}.rec-heading .eyebrow{font-size:9px}.carousel{margin-right:-20px;padding-right:20px;border-radius:20px 0 0 20px;gap:12px}.rec-card{flex-basis:88%;padding:22px}.rec-card h3{font-size:23px}.rec-card p{height:auto;min-height:44px}.carousel-controls{gap:5px}.carousel-controls button{width:30px;height:30px}.carousel-dots{margin-top:16px}}

.brand-banner{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;min-height:270px;margin-top:28px;padding:38px 44px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(115deg,var(--surface),var(--soft));box-shadow:0 18px 70px #24334406}.brand-banner:before{content:"";position:absolute;z-index:-1;width:420px;height:420px;right:-50px;top:-120px;background:radial-gradient(circle,#a9cdb82b,transparent 65%);pointer-events:none}.banner-copy{position:relative;z-index:1}.banner-copy h2{font-size:39px;line-height:1.25;letter-spacing:-1.5px;margin:17px 0 12px;font-weight:550}.banner-copy p{font-size:13px;color:var(--secondary);margin:0 0 24px}.banner-copy>a{font-size:12px;display:inline-flex;gap:32px;border:1px solid var(--line);border-radius:30px;padding:12px 18px;background:var(--surface)}.banner-break{display:none}.banner-art{position:relative;display:grid;place-items:center;width:310px;height:210px;flex-shrink:0}.banner-x{display:grid;place-items:center;font-size:86px;line-height:1;width:136px;height:136px;transform:rotate(-10deg);border:1px solid var(--line);border-radius:34px;background:linear-gradient(140deg,#ffffff30,#ffffff03);color:var(--text);backdrop-filter:blur(20px);box-shadow:12px 20px 35px #00000008}.banner-orbit{position:absolute;width:300px;height:120px;border:1px solid var(--line);border-radius:50%;transform:rotate(-28deg)}.orbit-two{transform:rotate(30deg);width:240px;height:180px}.banner-spark{position:absolute;color:var(--accent)}.spark-one{font-size:28px;right:26px;top:15px}.spark-two{font-size:18px;left:22px;bottom:30px}.banner-caption{position:absolute;bottom:-6px;font-size:8px;letter-spacing:2.5px;color:var(--muted)}@media(max-width:620px){.brand-banner{min-height:225px;margin-top:20px;padding:27px 23px;border-radius:22px}.banner-copy h2{font-size:29px;letter-spacing:-1px;margin-top:15px}.banner-copy p{font-size:10px;max-width:175px;line-height:1.7;margin-bottom:18px}.banner-copy .eyebrow{font-size:7px;letter-spacing:1.6px}.banner-copy>a{font-size:10px;padding:10px 12px;gap:18px}.banner-art{position:absolute;right:-53px;top:20px;width:210px;height:190px;z-index:-1;opacity:.65}.banner-x{font-size:58px;width:100px;height:100px;border-radius:26px}.banner-orbit{width:210px;height:90px}.orbit-two{width:165px;height:145px}.banner-caption{display:none}.banner-break{display:block}.spark-one{right:20px;top:9px}.spark-two{left:5px;bottom:28px}.banner-copy{max-width:75%}}@media(max-width:360px){.banner-art{right:-80px;opacity:.4}}

.creator-banner{height:108px;margin:-23px -23px 0;position:relative;overflow:hidden;border-radius:19px 19px 0 0;background:var(--soft)}.creator-banner>img{width:100%;height:100%;object-fit:cover}.banner-pattern{height:100%;background:radial-gradient(ellipse at 80% 0%,#8bbaa84a,transparent 55%),linear-gradient(125deg,#7c92a82e,#bcadcf30);position:relative;overflow:hidden}.banner-pattern:before,.banner-pattern:after{content:"";position:absolute;border:1px solid #ffffff40;width:230px;height:120px;border-radius:50%;right:-60px;top:5px;transform:rotate(-25deg)}.banner-pattern:after{right:20px;top:-75px;width:260px;height:180px}.banner-pattern span{position:absolute;right:30px;top:10px;font-size:82px;color:#ffffff50;transform:rotate(-12deg)}.banner-category{position:absolute;bottom:14px;left:22px;font-size:10px;background:#ffffffb0;color:#294638;border:1px solid #ffffff80;border-radius:20px;padding:5px 10px;backdrop-filter:blur(12px)}.cardtop{margin-top:18px}.card .avatar{width:50px;height:50px;border:3px solid var(--bg)}.card .bio{margin-top:15px}.like-row{display:flex;align-items:center;gap:10px;margin-top:17px}.like-button{display:flex;align-items:center;gap:7px;border:1px solid var(--line);padding:7px 11px;border-radius:30px;font-size:11px;background:var(--soft);color:var(--secondary);min-height:36px}.like-button>span{font-size:18px}.like-button b{font-weight:550}.like-button.liked{color:#bc536e;border-color:#bc536e30;background:#bc536e08}.like-button:disabled:not(.liked){opacity:.5;cursor:default}.like-note{font-size:9px;color:var(--muted)}.cardfooter .x-direct{font-size:11px;color:var(--secondary);display:flex;align-items:center;gap:7px;padding:7px 0 7px 12px}.x-direct svg{width:14px;height:14px}.rec-action a{color:var(--text);padding:8px 0;white-space:nowrap}.rec-action>a svg{width:15px;height:15px}.rec-action>span{font-size:11px}@media(min-width:1450px){.creator-banner{margin:-26px -26px 0}}@media(max-width:620px){.creator-banner{margin:-20px -20px 0;height:112px;border-radius:17px 17px 0 0}.card .avatar{width:48px;height:48px}.cardtop{margin-top:16px}}

/* Mobile readability: loaded after the base styles so these sizes take effect. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(max-width:700px){
 html[data-theme=light]{--secondary:#425466;--muted:#526170;--line:#25364b24}
 html[data-theme=dark]{--secondary:#c0cad5;--muted:#a8b5c3;--line:#ffffff24}
 body{font-size:16px;line-height:1.6}
 .wrap{padding-left:16px;padding-right:16px}
 .header{height:auto;min-height:76px;gap:10px;padding:12px 0}
 .brand{font-size:16px;letter-spacing:0;gap:8px;line-height:1.35;min-width:0}
 .mark{width:32px;height:36px;font-size:22px;flex-shrink:0}
 .nav{gap:8px;flex-shrink:0}
 .nav>button[data-view]{display:none}
 .nav .theme-toggle{font-size:14px;min-height:44px;padding:9px 12px;font-weight:550}
 .brand-banner{padding:28px 24px;min-height:250px;margin-top:20px}
 .banner-copy{max-width:100%}
 .banner-copy h2{font-size:34px;line-height:1.25;letter-spacing:-.8px;font-weight:650;margin:16px 0}
 .banner-copy .eyebrow{font-size:10px;letter-spacing:1.5px;color:var(--secondary)}
 .banner-copy p{font-size:15px;line-height:1.75;max-width:260px;margin-bottom:20px}
 .banner-copy>a{font-size:14px;min-height:44px;padding:10px 16px;align-items:center;gap:22px}
 .banner-art{position:absolute;right:-65px;top:30px;width:210px;height:190px;z-index:-1;opacity:.22}
 .banner-caption{display:none}
 .banner-break{display:block}
 h2,.sectiontop h2{font-size:23px;line-height:1.45;font-weight:650;letter-spacing:-.5px}
 .sectiontop p{font-size:14px;line-height:1.75;margin-top:8px;color:var(--secondary)}
 .sectiontop{display:block;margin-bottom:18px}
 .search{width:100%;margin-top:20px;min-height:50px;padding:12px 14px;gap:10px}
 .search input{font-size:16px;line-height:1.5;min-width:0}
 .search input::placeholder{color:var(--muted);opacity:1}
 .search svg{width:22px;height:22px;flex-shrink:0}
 .search kbd{display:none}
 .filters{display:block;margin-right:-16px;padding-bottom:16px;margin-bottom:20px}
 .categories{padding-right:16px;gap:8px}
 .chip{font-size:15px;line-height:1.45;min-height:44px;padding:10px 15px;font-weight:550;color:var(--secondary)}
 .chip small{font-size:12px;opacity:1;margin-left:7px;font-weight:400}
 .sort{display:block;margin:12px 16px 0 auto;font-size:14px;min-height:44px;max-width:170px;color:var(--secondary)}
 .grid{grid-template-columns:1fr;gap:20px}
 .card{padding:20px;border-radius:20px}
 .creator-banner{margin:-20px -20px 0;height:120px;border-radius:19px 19px 0 0}
 .banner-category{font-size:13px;line-height:1.4;left:20px;bottom:14px;padding:6px 11px;background:#f5faf8ed;color:#234c38;font-weight:550}
 .cardtop{gap:12px;margin-top:20px;align-items:center}
 .cardtop>div{min-width:0;flex:1}
 .card .avatar{width:56px;height:56px;flex-shrink:0}
 .name{font-size:20px;line-height:1.4;font-weight:650;letter-spacing:0;flex-wrap:wrap;overflow-wrap:anywhere;gap:6px;margin-bottom:5px}
 .verified{width:16px;height:16px;flex-shrink:0}
 .handle{font-size:14px;line-height:1.6;overflow-wrap:anywhere;letter-spacing:0;color:var(--muted)}
 .save{width:44px;height:44px;align-self:center;border:1px solid var(--line);border-radius:12px;color:var(--secondary)}
 .save svg{width:22px;height:22px}
 .card .bio{font-size:16px;line-height:1.85;height:auto;min-height:0;margin:18px 0;color:var(--secondary);overflow-wrap:anywhere}
 .tags{gap:8px;row-gap:8px}
 .tag{font-size:13px;line-height:1.5;padding:6px 10px;border-radius:8px;color:var(--secondary);border-color:var(--line)}
 .like-row{margin-top:20px;gap:10px;flex-wrap:wrap}
 .like-button{font-size:14px;line-height:1.5;min-height:44px;padding:9px 15px;gap:8px;color:var(--secondary)}
 .like-button>span{font-size:22px;line-height:1}
 .like-button b{font-size:15px;font-weight:600}
 .like-button.liked{color:#a82e51;background:#b53c5c0d;border-color:#b53c5c40}
 html[data-theme=dark] .like-button.liked{color:#ffa8bf;background:#ffa8bf0b;border-color:#ffa8bf45}
 .like-button:disabled:not(.liked){opacity:1;color:var(--muted)}
 .like-note{font-size:12px;line-height:1.6}
 .cardfooter{font-size:14px;line-height:1.6;margin-top:20px;padding-top:16px;gap:8px;flex-wrap:wrap;color:var(--secondary)}
 .followers{font-size:20px;line-height:1.4;font-weight:650}
 .cardfooter .x-direct{font-size:15px;min-height:44px;padding:9px 0 9px 10px;gap:8px;color:var(--accent);font-weight:550;margin-left:auto}
 .x-direct svg{width:18px;height:18px}
 .resultline{font-size:13px;line-height:1.6;letter-spacing:0;margin:28px 0 34px;gap:9px;color:var(--muted)}
 .resultline:before,.resultline:after{width:20px}
 .footer{display:block;font-size:13px;line-height:1.8;padding-bottom:140px}
 .footer-brand{font-size:16px;font-weight:550;margin-bottom:8px}
 .footer-right{text-align:left;font-size:12px;line-height:1.9;margin-top:14px}
 .bottomnav{display:flex;padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:8px}
 .bottomnav button{font-size:13px;line-height:1.5;gap:5px;min-height:54px;min-width:70px;padding:4px 12px;color:var(--muted)}
 .bottomnav svg{width:24px;height:24px}
 .bottomnav button.active{font-weight:600;color:var(--accent)}
 .toast{font-size:14px;line-height:1.6;bottom:calc(100px + env(safe-area-inset-bottom));max-width:calc(100% - 32px);width:max-content;white-space:normal;text-align:center;padding:12px 18px;border-radius:18px}
 .empty{font-size:16px;line-height:1.8;padding:42px 12px}
 .empty button{font-size:15px;min-height:44px}
 dialog{padding:26px 22px}
 .detail h2{font-size:24px}
 .detail p{font-size:16px;line-height:1.85}
 .detail .detail-note{font-size:14px!important}
 .demo-label{font-size:12px}
 .detail-action{font-size:16px;min-height:48px;line-height:1.5;padding:13px}
 .close{min-width:44px;min-height:44px;font-size:18px}
}
@media(max-width:360px){.brand{font-size:14px}.nav .theme-toggle{font-size:13px;padding:9px 10px}.card{padding:18px}.creator-banner{margin:-18px -18px 0}.cardtop{gap:9px}.card .avatar{width:48px;height:48px}.name{font-size:19px}.cardfooter{column-gap:6px}.cardfooter .x-direct{font-size:14px}.banner-copy h2{font-size:31px}}

/* Consistent label colors across navigation, cards and both themes. */
[data-tone="0"]{--label-fg:#176340;--label-bg:#e0f3e7;--label-border:#79b995}
[data-tone="1"]{--label-fg:#205aa1;--label-bg:#e5efff;--label-border:#8cb1e5}
[data-tone="2"]{--label-fg:#7044a1;--label-bg:#f0e7fc;--label-border:#b59ad9}
[data-tone="3"]{--label-fg:#a23655;--label-bg:#fde8ee;--label-border:#dc98ac}
[data-tone="4"]{--label-fg:#8c4a17;--label-bg:#fff0de;--label-border:#d8ad79}
[data-tone="5"]{--label-fg:#12676b;--label-bg:#def3f3;--label-border:#79babe}
[data-tone="6"]{--label-fg:#47599b;--label-bg:#e9edff;--label-border:#a0abdb}
[data-tone="7"]{--label-fg:#7a5c0c;--label-bg:#fff5cd;--label-border:#ccb75d}
[data-tone="8"]{--label-fg:#9c3b31;--label-bg:#ffeae4;--label-border:#dd9e90}
[data-tone="9"]{--label-fg:#626d15;--label-bg:#f0f4d9;--label-border:#acba69}
html[data-theme=dark] [data-tone="0"]{--label-fg:#9ce2b5;--label-bg:#1c3629;--label-border:#3c7553}
html[data-theme=dark] [data-tone="1"]{--label-fg:#a7cdff;--label-bg:#1d2f49;--label-border:#456b9c}
html[data-theme=dark] [data-tone="2"]{--label-fg:#d6b6ff;--label-bg:#332444;--label-border:#76539a}
html[data-theme=dark] [data-tone="3"]{--label-fg:#ffb1c7;--label-bg:#432632;--label-border:#99556d}
html[data-theme=dark] [data-tone="4"]{--label-fg:#f8ca95;--label-bg:#3e3021;--label-border:#8e6c40}
html[data-theme=dark] [data-tone="5"]{--label-fg:#92dddd;--label-bg:#1b3539;--label-border:#39797d}
html[data-theme=dark] [data-tone="6"]{--label-fg:#bac6ff;--label-bg:#292e47;--label-border:#5b6aab}
html[data-theme=dark] [data-tone="7"]{--label-fg:#f2dc85;--label-bg:#3b3420;--label-border:#877939}
html[data-theme=dark] [data-tone="8"]{--label-fg:#ffb8a7;--label-bg:#422a26;--label-border:#9d6252}
html[data-theme=dark] [data-tone="9"]{--label-fg:#d2e28c;--label-bg:#303720;--label-border:#778341}
.tag[data-tone],.tag[data-tone]:first-child,.banner-category[data-tone],.chip[data-tone]{color:var(--label-fg);background:var(--label-bg);border:1px solid var(--label-border);font-weight:550}
.chip[data-tone] small{color:inherit;opacity:1}
.chip[data-tone]:hover{color:var(--label-fg);background:var(--label-bg);box-shadow:inset 0 0 0 1px var(--label-border)}
.chip[data-tone].active,.chip[data-tone].active:hover{color:var(--label-fg);background:var(--label-bg);border-color:var(--label-fg);box-shadow:inset 0 0 0 1px var(--label-fg);font-weight:700}
.chip[data-tone].active:before{content:"✓";margin-right:6px}
.bio-link{color:#1c61a7;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere;word-break:break-word;font-weight:500}
html[data-theme=dark] .bio-link{color:#9dcdff}
.bio-link:hover{text-decoration-thickness:2px}
.bio-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.card .bio{height:auto;min-height:46px;overflow:visible;white-space:pre-line;overflow-wrap:anywhere}
@media(max-width:700px){.card .bio{min-height:0}.bio-link{font-size:inherit;line-height:inherit}.chip[data-tone]{min-height:44px}}

#bannerTitle{white-space:pre-line;overflow-wrap:anywhere}#bannerSubtitle,#footerText{white-space:pre-line;overflow-wrap:anywhere}#siteName,#footerName,#sectionTitle,#sectionSub{overflow-wrap:anywhere}#siteName{max-width:340px}@media(max-width:700px){#siteName{max-width:calc(100vw - 170px)}.brand{flex:1}}



/* Deliberate actions, bookmark help and subtle interaction feedback. */
.site-save-button{display:inline-flex!important;align-items:center;justify-content:center;min-height:44px;padding:9px 14px!important;border:1px solid var(--line);border-radius:24px;background:var(--surface);font-size:13px;color:var(--text);white-space:nowrap;gap:6px}
.nav .theme-toggle{min-height:44px}
.avatar-link{display:block;line-height:0;flex-shrink:0;border-radius:50%;transition:transform .2s,box-shadow .2s}
.avatar-link:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0002}
.avatar-link:active{transform:scale(.94)}
.card .avatar-link .avatar{display:block}
.cardtop>.avatar-link{flex:none}
.cardfooter .x-direct{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 16px;font-size:13px;border-radius:12px;background:var(--text);color:var(--bg);gap:9px;border:1px solid transparent;font-weight:600;transition:transform .18s,box-shadow .18s}
.cardfooter .x-direct:hover{transform:translateY(-2px);box-shadow:0 4px 14px #0002;text-decoration:none}
.cardfooter .x-direct:active{transform:scale(.96)}
.card{cursor:default}.card:hover{transform:none}
.like-button,.save,.theme-toggle,.site-save-button{transition:transform .18s,background-color .3s,color .3s,border-color .3s,box-shadow .2s}
.like-button:not(:disabled):active,.save:active,.theme-toggle:active,.site-save-button:active{transform:scale(.94)}
.like-button{position:relative}.like-button>span{display:inline-block;transform-origin:center}
.like-pending>span{animation:likeHeartbeat .65s ease-in-out infinite}
.like-celebrate>span{animation:likeHeartPop .65s cubic-bezier(.2,.9,.3,1.4)}
.like-celebrate:after{content:'+1';position:absolute;right:8px;top:-12px;color:inherit;font-size:15px;font-weight:700;pointer-events:none;animation:likeFloat .85s ease-out both}
.like-celebrate:before{content:'';position:absolute;inset:-4px;border:2px solid currentColor;border-radius:inherit;pointer-events:none;animation:likeRing .7s ease-out both}
@keyframes likeHeartbeat{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes likeHeartPop{0%{transform:scale(.7)}35%{transform:scale(1.55) rotate(-12deg)}65%{transform:scale(.95) rotate(6deg)}100%{transform:scale(1)}}
@keyframes likeFloat{0%{opacity:0;transform:translateY(4px)}25%{opacity:1}100%{opacity:0;transform:translateY(-25px)}}
@keyframes likeRing{0%{opacity:.65;transform:scale(.95)}100%{opacity:0;transform:scale(1.25)}}
.theme-changing body,.theme-changing .card,.theme-changing .brand-banner,.theme-changing .bottomnav,.theme-changing .search,.theme-changing .tag,.theme-changing .chip{transition:background-color .4s,color .4s,border-color .4s,box-shadow .4s}
.theme-changing #themeToggle{animation:themeNod .5s ease}
@keyframes themeNod{0%{transform:rotate(0)}40%{transform:rotate(-10deg) scale(.95)}100%{transform:rotate(0)}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.4s;animation-timing-function:ease-in-out}
#saveSiteDialog{width:min(440px,calc(100% - 32px));padding:30px 24px}
#saveSiteDialog h2{font-size:22px;margin:0 36px 18px 0}
#saveSiteDialog p{font-size:15px;line-height:1.8;color:var(--secondary)}
#saveSiteDialog label{display:block;font-size:13px;color:var(--muted);margin:18px 0 8px}
#siteAddress{width:100%;min-height:46px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:10px 12px;font-size:16px}
.save-site-close{position:absolute;top:10px;right:10px;min-width:44px;min-height:44px;color:var(--secondary);font-size:18px}
.save-site-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.save-site-actions button{min-height:44px;padding:10px 16px;border:1px solid var(--line);background:var(--surface);border-radius:12px;font-size:14px}
#copySiteLink{background:var(--text);color:var(--bg)}
#saveSiteDialog .save-site-note{font-size:12px;color:var(--muted)}
@media(max-width:700px){.header{flex-wrap:wrap}.header>.brand{flex:1;min-width:0}.header .nav{gap:7px}.site-save-button{font-size:13px;padding:9px 11px!important}.nav .theme-toggle{font-size:13px;padding:9px 10px}.cardfooter .x-direct{min-height:44px;font-size:14px;padding:10px 15px}.card .avatar-link{flex:none}#siteName{max-width:calc(100vw - 265px);min-width:70px;font-size:14px}#saveSiteDialog h2{font-size:22px}}
@media(max-width:380px){.header>.brand{flex-basis:100%}#siteName{max-width:none;font-size:16px}.header .nav{width:100%;justify-content:flex-end}.header{gap:10px;padding:12px 0}.site-save-button{font-size:14px}.nav .theme-toggle{font-size:14px}}
@media(prefers-reduced-motion:reduce){.like-pending>span,.like-celebrate>span,.like-celebrate:before,.like-celebrate:after,.theme-changing #themeToggle{animation:none!important}.like-celebrate:before,.like-celebrate:after{display:none}.theme-changing body,.theme-changing .card,.theme-changing .brand-banner,.theme-changing .bottomnav{transition:none!important}::view-transition-old(root),::view-transition-new(root){animation:none!important}}

/* More distinct emoji labels and a gentle avatar zoom on interaction. */
.categories{gap:14px;padding-top:4px;padding-bottom:8px}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:11px 16px;border-radius:12px}
.chip small{margin-left:3px;min-width:20px;text-align:center;font-variant-numeric:tabular-nums;font-weight:550}
.chip[data-tone].active:before{margin-right:0;font-size:11px}
.tag-emoji{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:1.05em;line-height:1;flex-shrink:0}
.tag-name{line-height:1.5}
.tags{gap:11px;row-gap:12px}
.tag{display:inline-flex;align-items:center;gap:6px;padding:7px 11px}
.banner-category{display:inline-flex;align-items:center;gap:6px}
.avatar-link{position:relative;z-index:1;transform-origin:center;transition:transform .22s cubic-bezier(.2,.8,.3,1.2),box-shadow .22s}
.avatar-link:active{transform:scale(1.16);box-shadow:0 0 0 5px var(--soft),0 8px 22px #0002;z-index:3}
.avatar-link.avatar-pop{animation:avatarZoom .5s cubic-bezier(.2,.8,.3,1.2);z-index:3}
@media(hover:hover) and (pointer:fine){.avatar-link:hover{transform:scale(1.1);box-shadow:0 0 0 4px var(--soft),0 7px 20px #0002}}
@keyframes avatarZoom{0%{transform:scale(1.06)}40%{transform:scale(1.22);box-shadow:0 0 0 6px var(--soft),0 9px 25px #0002}100%{transform:scale(1)}}
@media(max-width:700px){.categories{gap:13px;padding-top:6px;padding-bottom:10px}.chip{gap:7px;padding:11px 16px;min-height:48px;font-size:15px}.chip .tag-emoji{font-size:17px}.tags{gap:10px;row-gap:12px}.tag{gap:7px;padding:7px 11px;font-size:13px}.banner-category{gap:6px}}
@media(prefers-reduced-motion:reduce){.avatar-link.avatar-pop{animation:none!important}.avatar-link:active,.avatar-link:hover{transform:none!important}}