/* Initial mockup composition, with real articles and the adopted brand/brush. */
.site-header{position:relative;background:#fff;isolation:isolate}
.site-header:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--yellow);clip-path:polygon(0 0,39% 0,36% 100%,0 100%)}
.site-header .search-form{background:#f4f4f4;border-color:#eee}
.home-original-hero{position:relative;isolation:isolate;background:#fff;overflow:hidden}
.home-original-hero:before{content:"";position:absolute;inset:0;z-index:-2;background:var(--yellow);clip-path:polygon(0 0,38% 0,34% 53%,48% 64%,100% 5%,100% 100%,0 100%)}
.home-original-hero:after{display:none;content:"";position:absolute;z-index:-1;left:43%;bottom:0;width:31%;height:49%;background:#ff4c9a;clip-path:polygon(27% 0,100% 27%,83% 100%,0 100%)}
.home-original-hero .hero-inner{position:relative;grid-template-columns:49% 51%;min-height:420px;align-items:center;gap:0;padding-top:10px}
.home-original-hero .hero-copy{padding:20px 0 30px;min-width:0;z-index:3}
.home-original-hero .hero-copy h1{font-size:clamp(72px,7.5vw,118px);line-height:1.12;letter-spacing:-.045em;margin-bottom:20px;transform:rotate(-3deg)}
.home-original-hero .hero-copy h1>span:first-child{font-size:1em;margin-bottom:0}
.home-original-hero .hero-copy h1>span:before{inset:-.12em -.18em -.13em -.18em}
.home-original-hero .hero-copy p{font-size:18px;line-height:1.55;max-width:560px;margin:0 0 18px}
.home-original-hero .hero-read{font-size:19px;min-height:54px;border-radius:35px;padding:12px 30px;background:#0c0c0c}
.home-original-hero .hero-cat{align-self:end;justify-self:start;width:100%;max-width:590px;margin:0 0 -8px -10px;z-index:2;grid-column:2;grid-row:1;transform:none}
.home-original-hero .hero-cat:before{display:none}
.home-original-hero .original-hero-cat{width:100%;height:auto;overflow:visible}
.home-original-hero .hero-slogan{position:absolute;right:0;top:16%;writing-mode:vertical-rl;font-size:clamp(25px,2.7vw,38px);line-height:1.3;font-weight:950;letter-spacing:.04em;transform:rotate(-7deg)}
.home-teasers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;padding-block:22px 26px;background:#fff}
.home-teaser{display:block;min-width:0}
.home-teaser img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:7px;margin-bottom:8px}
.home-teaser>span{display:block;font-weight:800;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.home-teaser .icon{width:16px;height:16px}
.home-teaser:hover>span{text-decoration:underline;text-underline-offset:3px}
.home-browse-layout{grid-template-columns:205px minmax(0,1fr) 290px;gap:24px;padding-top:20px;align-items:start}
.category-rail{background:#fff;border:1px solid #e7e7e7;border-radius:10px;overflow:hidden;min-width:0}
.category-rail>h2{font-size:19px;padding:13px 16px;background:#111;color:#fff}
.category-toggle{display:none}
.category-rail .categories{background:none;border:0;scroll-margin-top:24px}
.category-rail .category-inner{width:100%;margin:0;padding:10px;display:flex;flex-direction:column;gap:3px}
.category-rail .category-link{flex:0 0 auto;justify-content:flex-start;min-height:60px;border:0;padding:8px 4px;gap:11px}
.category-rail .category-icon{width:32px;height:32px;flex-basis:32px;border-radius:50%;background:var(--category)}
.category-rail .category-icon .icon{width:21px;height:21px}
.category-rail .category-copy strong{font-size:14px;line-height:1.5;white-space:normal}
.category-rail .category-copy small{font-size:12px;color:#737777}
.category-collections-link{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:15px;font-weight:800;border-top:1px solid #eee}
.home-browse-layout .feed{min-width:0}
.home-browse-layout .feed-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;margin-bottom:18px}
.home-browse-layout .feed-tab{font-size:13px;min-height:44px;padding:7px 5px;gap:5px;white-space:normal}
.home-browse-layout .feed-tab .icon{width:16px;height:16px}
.home-browse-layout .results-heading{border-left:6px solid var(--yellow);padding-left:12px;margin-bottom:10px}
.home-browse-layout .results-heading h2{font-size:25px}
.home-browse-layout .feed-description{font-size:14px;margin-bottom:14px}
.home-browse-layout .question-card{border-radius:0;background:#fff;border:0;border-bottom:1px solid #e7e7e7;padding:18px 0;margin:0;box-shadow:none}
.home-browse-layout .question-main{grid-template-columns:174px minmax(0,1fr);gap:18px;align-items:start}
.home-browse-layout .question-main>div{grid-column:2;grid-row:1;min-width:0}
.home-browse-layout .question-main>.thumbnail{grid-column:1;grid-row:1;display:block;height:126px;width:100%;border-radius:6px;overflow:hidden;order:0}
.home-browse-layout .question-main.no-photo{grid-template-columns:minmax(0,1fr)}
.home-browse-layout .question-main.no-photo>div{grid-column:1}
.home-browse-layout .question-heading{margin-top:9px;gap:0}
.home-browse-layout .question-heading h3{font-size:21px;line-height:1.5;overflow-wrap:anywhere}
.home-browse-layout .q-marker{display:none}
.home-browse-layout .question-preview{display:none}
.home-browse-layout .card-top{gap:9px;align-items:center;flex-wrap:wrap}
.home-browse-layout .tag{font-size:12px;padding:3px 8px;max-width:100%}
.home-browse-layout .card-top time{font-size:12px}
.home-browse-layout .card-bottom{margin-top:0;padding:8px 0 0 192px;gap:8px}
.home-browse-layout .entry-meta{font-size:11px}
.home-browse-layout .card-bottom>.button{min-height:34px;font-size:13px;padding:6px 10px;border-radius:5px}
.home-browse-layout .sidebar{min-width:0}
.home-browse-layout .rank-text{font-size:15px}
.home-browse-layout .side-title{font-size:20px}
.side-collections{display:block;width:100%;margin-top:20px;border-radius:9px;overflow:hidden;background:#ff4c9a;line-height:0}
.side-collections .collection-art{display:block;width:100%;height:auto;overflow:hidden}
.side-collections:hover{outline:3px solid #111;outline-offset:3px}
.home-random-guide{display:grid;grid-template-columns:180px minmax(0,1fr);grid-template-areas:"cat copy" "cat action";gap:8px 18px;padding:16px 16px 0 0;background:#fff9e9;border:0;box-shadow:none;border-radius:10px;overflow:hidden;align-items:center}
.home-random-guide .guide-cat{width:180px;grid-area:cat;align-self:end;margin:0}
.home-random-guide .lower-cat-art{overflow:hidden;display:block}
.home-random-guide .guide-copy{grid-area:copy;padding:0}
.home-random-guide .guide-copy h2{font-size:20px;line-height:1.5}
.home-random-guide .guide-copy p{font-size:17px;line-height:1.5;margin:2px 0 0}
.home-random-guide>.button{grid-area:action;border-radius:35px;font-size:18px;min-height:50px;justify-self:start;margin:0 0 16px;padding:10px 22px}
.collections-page .entry-types{width:100%;margin:0;padding:0}
.collections-page .entry-types-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.collections-page .entry-type-card{min-height:155px;background:#fff6b9}
.collections-page .entry-type-card:nth-child(2){background:#ffe1ed}
.collections-page .entry-type-card:nth-child(3){background:#d8f4ff}
.collections-page .entry-type-card:nth-child(4){background:#e9e1ff}
.collections-page .entry-type-card:hover{color:#fff;background:#111}
.collections-page .home-random-guide{margin-top:24px}
@media(min-width:851px) and (max-width:1150px){
 .home-browse-layout{grid-template-columns:150px minmax(0,1fr) 230px;gap:16px}
 .home-browse-layout .question-main{grid-template-columns:118px minmax(0,1fr);gap:12px}
 .home-browse-layout .question-main>.thumbnail{height:96px}
 .home-browse-layout .question-heading h3{font-size:18px}
 .home-browse-layout .card-bottom{padding-left:130px;flex-wrap:wrap}
 .home-browse-layout .feed-tab{font-size:12px;gap:3px}
 .category-rail .category-link{gap:7px;padding:6px 0}
 .category-rail>h2{font-size:16px;padding-inline:10px}
 .category-rail .category-copy strong{font-size:13px}
 .category-rail .category-icon{width:26px;height:26px;flex-basis:26px}
 .home-original-hero .hero-inner{min-height:350px}
 .home-original-hero .hero-copy h1{font-size:64px}
 .home-original-hero .hero-copy p{font-size:16px}
 .home-original-hero .hero-slogan{font-size:27px;right:-5px}
 .home-original-hero .hero-cat{max-width:470px}
 .home-random-guide{grid-template-columns:125px minmax(0,1fr);gap:7px 12px}
 .home-random-guide .guide-cat{width:125px}
 .home-random-guide .guide-copy h2{font-size:17px}
 .home-random-guide .guide-copy p{font-size:15px}
 .home-random-guide>.button{font-size:16px;padding-inline:16px}
}
@media(max-width:850px){
 .site-header:before{clip-path:polygon(0 0,48% 0,43% 100%,0 100%)}
 .home-original-hero .hero-inner{grid-template-columns:52% 48%;min-height:300px;padding-top:6px}
 .home-original-hero .hero-copy{display:block;padding:14px 0 20px;grid-column:1;grid-row:1}
 .home-original-hero .hero-copy h1{font-size:clamp(37px,7vw,55px);margin-bottom:16px}
 .home-original-hero .hero-copy p{font-size:15px;line-height:1.5;margin-bottom:14px}
 .home-original-hero .hero-read{font-size:15px;min-height:44px;padding:10px 18px}
 .home-original-hero .hero-cat{grid-column:2;grid-row:1;width:100%;max-width:350px;margin-left:-5px;max-height:none}
 .home-original-hero .hero-slogan{display:none}
 .home-teasers{gap:12px;padding-block:16px 20px;overflow-x:auto;grid-template-columns:repeat(5,148px);overscroll-behavior-x:contain;scrollbar-width:thin}
 .home-teaser>span{font-size:13px}
 .home-browse-layout{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:8px}
 .category-rail>h2{display:none}
 .category-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 15px;background:#111;color:#fff;font-weight:800;text-align:left;font-size:16px}
 .category-options:not(.is-open){display:none}
 .category-rail .category-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:10px;gap:5px}
 .category-rail .category-link{min-height:55px;padding:5px}
 .home-browse-layout .question-main{grid-template-columns:148px minmax(0,1fr);gap:16px}
 .home-browse-layout .question-main>.thumbnail{height:112px}
 .home-browse-layout .question-heading h3{font-size:21px}
 .home-browse-layout .card-bottom{padding-left:164px;flex-wrap:wrap}
 .home-browse-layout .sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
 .home-browse-layout .side-collections{margin-top:0;align-self:start}
 .home-browse-layout .side-recommend{grid-column:1/-1}
 .home-browse-layout .sidebar .notice-panel{grid-column:1/-1}
}
@media(max-width:560px){
 .home-original-hero .hero-inner{min-height:0;grid-template-columns:58% 42%;padding-block:24px;row-gap:14px}
 .home-original-hero .hero-copy{display:contents}
 .home-original-hero .hero-copy h1{font-size:clamp(35px,10.7vw,52px);line-height:1.18;letter-spacing:-.05em;margin:0;grid-column:1;grid-row:1;z-index:3}
 .home-original-hero .hero-copy p{font-size:14px;line-height:1.55;margin:0;width:100%;max-width:none;grid-column:1/-1;grid-row:2;z-index:3}
 .home-original-hero .hero-copy .intro-phrase{white-space:normal}
 .home-original-hero .hero-read{font-size:14px;padding:9px 14px;gap:6px;white-space:nowrap;min-height:42px;grid-column:1/-1;grid-row:3;justify-self:start;z-index:3}
 .home-original-hero .hero-cat{width:110%;max-width:none;margin:0 0 -4px -10%;grid-column:2;grid-row:1;align-self:end;padding-top:0}
 .home-original-hero:after{left:48%;width:52%;height:55%}
 .home-teasers{grid-template-columns:repeat(5,126px);gap:12px;padding-block:16px}
 .home-browse-layout .feed-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-bottom:14px}
 .home-browse-layout .feed-tab{font-size:14px;min-height:44px;padding:9px}
 .home-browse-layout .results-heading h2{font-size:23px}
 .home-browse-layout .question-main{grid-template-columns:105px minmax(0,1fr);gap:12px}
 .home-browse-layout .question-main>.thumbnail{height:94px;order:0}
 .home-browse-layout .question-heading h3{font-size:18px;line-height:1.55}
 .home-browse-layout .card-top time{font-size:11px}
 .home-browse-layout .tag{font-size:11px;padding:2px 6px}
 .home-browse-layout .card-bottom{padding-left:117px;gap:6px;padding-top:8px}
 .home-browse-layout .entry-meta{font-size:10px}
 .home-browse-layout .card-bottom>.button{font-size:12px;min-height:34px}
 .home-browse-layout .sidebar{display:flex;flex-direction:column;gap:0}
 .home-browse-layout .sidebar .side-collections{margin-top:20px;max-width:340px;align-self:center}
 .home-random-guide{grid-template-columns:105px minmax(0,1fr);grid-template-areas:"cat copy" "action action";gap:6px 10px;padding:12px 12px 0 0}
 .home-random-guide .guide-cat{width:105px}
 .home-random-guide .guide-copy h2{font-size:16px}
 .home-random-guide .guide-copy p{font-size:14px}
 .home-random-guide>.button{justify-self:center;min-height:46px;font-size:17px;padding:10px 20px;margin-bottom:12px}
 .collections-page .entry-types-grid{grid-template-columns:minmax(0,1fr)}
 .collections-page .article-header,.collections-page .article-body{padding:20px 16px}
 .collections-page .article-header h1{font-size:23px}
}

/* Keep each photo row compact while allowing long titles to grow. */
.home-browse-layout .question-card{display:grid;grid-template-columns:174px minmax(0,1fr);gap:6px 18px}
.home-browse-layout .question-main{display:contents}
.home-browse-layout .question-main>.thumbnail{grid-row:1/3;align-self:start}
.home-browse-layout .card-bottom{grid-column:2;grid-row:2;padding:0;align-self:end}
.home-browse-layout .question-card:has(.no-photo){grid-template-columns:minmax(0,1fr)}
.home-browse-layout .question-card:has(.no-photo) .card-bottom{grid-column:1}
@media(min-width:851px) and (max-width:1150px){.home-browse-layout .question-card{grid-template-columns:118px minmax(0,1fr);column-gap:12px}}
@media(max-width:850px){.home-browse-layout .question-card{grid-template-columns:148px minmax(0,1fr);column-gap:16px}}
@media(max-width:560px){.home-browse-layout .question-card{grid-template-columns:105px minmax(0,1fr);column-gap:12px}}

/* Static headline and slogan preserve the original mockup letterforms. */
.home-original-hero .hero-copy h1{transform:none;line-height:1;text-shadow:none}
.home-original-hero .hero-copy h1>span+span{margin-left:.3em;margin-top:-.04em}
.home-original-hero .mockup-type{display:block;height:auto;overflow:hidden}
.home-original-hero .headline-first{width:3.5em}
.home-original-hero .headline-second{width:4.7em}
.home-original-hero .hero-slogan{transform:none;writing-mode:horizontal-tb;top:14%;right:-40px;z-index:4;line-height:0}
.home-original-hero .hero-slogan .slogan{height:clamp(245px,24vw,390px);width:auto}
@media(max-width:560px){.home-original-hero .hero-copy h1{font-size:clamp(30px,9.4vw,47px)}}
@media(min-width:851px) and (max-width:1150px){.home-original-hero .hero-slogan{right:-4px}.home-original-hero .hero-slogan .slogan{height:245px}}

/* Restore the two original asides, their marks and the button's brush line. */
.home-original-hero .hero-cat{position:relative}
.home-original-hero .hero-aside{position:absolute;line-height:0;margin:0;z-index:3;pointer-events:none}
.home-original-hero .hero-aside-peek{left:69.2%;top:22.1%;width:30.6%}
.home-original-hero .hero-aside-binge{left:34%;top:60%;width:190px}
.home-original-hero .hero-aside .mockup-type{width:100%;height:auto}
.home-original-hero .hero-read{position:relative;overflow:visible}
.home-original-hero .hero-cta-stroke{position:absolute;width:96px;right:22px;bottom:-16px;pointer-events:none}
.home-original-hero .hero-cta-stroke .mockup-type{width:100%;height:auto}
@media(min-width:851px) and (max-width:1150px){
 .home-original-hero .hero-aside-binge{left:38%;top:62%;width:155px}
}
@media(max-width:850px){
 .home-original-hero .hero-inner{row-gap:14px;padding-block:24px;min-height:0}
 .home-original-hero .hero-copy,.home-original-hero .hero-cat{display:contents}
 .home-original-hero .hero-copy h1{grid-column:1;grid-row:1;align-self:center;margin:0}
 .home-original-hero .original-hero-cat{grid-column:2;grid-row:1;align-self:end;width:100%;max-width:350px;position:relative;z-index:2}
 .home-original-hero .hero-aside-peek{position:relative;grid-column:2;grid-row:2;left:auto;top:auto;width:180px;max-width:100%;justify-self:center}
 .home-original-hero .hero-aside-binge{position:relative;grid-column:1;grid-row:2;left:auto;top:auto;width:190px;max-width:100%;justify-self:center}
 .home-original-hero .hero-copy p{grid-column:1/-1;grid-row:3;margin:0;width:100%;max-width:none}
 .home-original-hero .hero-copy .hero-read{grid-column:1/-1;grid-row:4;justify-self:start}
}
@media(max-width:560px){
 .home-original-hero .original-hero-cat{width:110%;max-width:none;margin-left:-10%}
 .home-original-hero .hero-aside-peek{width:112px}
 .home-original-hero .hero-aside-binge{width:156px}
}

/* Keep the cat's invitation above its ears at tablet and phone widths. */
@media(min-width:561px) and (max-width:850px){
 .home-original-hero .hero-copy h1{font-size:clamp(52px,9.5vw,74px);margin-bottom:60px}
 .home-original-hero .original-hero-cat{margin-top:76px}
 .home-original-hero .hero-aside-peek{grid-row:1;align-self:start;width:136px}
 .home-original-hero .hero-aside-binge{grid-row:1;align-self:end;justify-self:start;width:155px;margin-left:32px}
}
@media(max-width:560px){
 .home-original-hero .original-hero-cat{margin-top:58px}
 .home-original-hero .hero-aside-peek{grid-row:1;align-self:start;width:96px}
}

.home-original-hero .hero-description .description{width:400px;max-width:100%}
.home-original-hero .hero-read .cta-label{width:280px;max-width:100%}
@media(max-width:850px){.home-original-hero .hero-description .description{width:355px}.home-original-hero .hero-read .cta-label{width:225px}}
@media(max-width:560px){.home-original-hero .hero-description .description{width:100%}.home-original-hero .hero-read .cta-label{width:184px}}

.home-original-hero .hero-read{padding-inline:46px}
@media(max-width:850px){.home-original-hero .hero-read{padding-inline:28px}}
@media(max-width:560px){.home-original-hero .hero-read{padding-inline:16px}}

/* Clean, horizontal typography for the hero's explanatory copy and CTA. */
.home-original-hero .hero-clean-description{display:block;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-size:22.5px;font-weight:800;line-height:1.25;letter-spacing:0;transform:none;text-shadow:none}
.home-original-hero .hero-clean-description>span{display:block;white-space:nowrap}
.home-original-hero .hero-clean-cta{display:flex;align-items:center;justify-content:center;gap:12px;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-size:23px;font-weight:800;line-height:1.3;letter-spacing:0;white-space:nowrap;transform:none;text-shadow:none}
.home-original-hero .hero-clean-cta>.icon{width:26px;height:26px;color:#fff;stroke:#fff;stroke-width:2.4}
@media(max-width:850px){.home-original-hero .hero-clean-description{font-size:20px}.home-original-hero .hero-clean-cta{font-size:18px;gap:10px}.home-original-hero .hero-clean-cta>.icon{width:23px;height:23px}}
@media(max-width:560px){.home-original-hero .hero-clean-description{font-size:clamp(16.5px,5.15vw,22px);line-height:1.25}.home-original-hero .hero-clean-cta{font-size:15.5px;gap:8px}.home-original-hero .hero-clean-cta>.icon{width:20px;height:20px}}

/* Original text-only navigation. The adopted brand and the existing feed tabs stay. */
.site-header .brand{margin-right:clamp(0px,6vw,88px)}
.header-inner>.search-form{max-width:425px}
.desktop-nav{gap:clamp(18px,2vw,32px);flex-shrink:0}
.desktop-nav .nav-item{flex-direction:row;padding:18px 0;font-size:17px;line-height:1;gap:0}
.desktop-nav .nav-item .mockup-type{display:block;height:22px;width:auto;overflow:hidden}
.desktop-nav .nav-item[aria-current]:after{bottom:9px}
@media(min-width:851px) and (max-width:1150px){
 .header-inner{gap:16px}.site-header .brand{margin-right:0}.desktop-nav{gap:16px}
 .desktop-nav .nav-item .mockup-type{height:18px}
 .header-inner>.search-form{max-width:210px;min-width:120px}
}

@media(max-width:850px){.site-header .brand{margin-right:0}}

/* Move only the first headline line toward the second, and give the header brand air. */
.home-original-hero .hero-copy h1>span:first-child{position:relative;top:.18em}
.site-header .brand{margin-block:14px}

/* Enlarge and lower the adopted header lockup; leave the footer unchanged. */
.site-header .brand{margin-block:26px 14px}
.site-header .brand .brand-wordmark{font-size:48px}
.site-header .brand small{font-size:28px}
@media(max-width:560px){
 .site-header .brand .brand-wordmark{font-size:42px}
 .site-header .brand small{font-size:24.5px}
 .site-header .header-inner{gap:16px}
}

/* Publication announcements stay visible below the ranking on small screens. */
@media(max-width:850px){.sidebar>.notice-panel{display:block}}

/* The lower guide uses the original band's type, CTA, mood labels and paw. */
.home-random-guide{display:block;padding:0;background:#fdf7e9;border-radius:10px}
.cat-guide.home-random-guide .random-reference-art{display:block;width:100%;height:auto;overflow:hidden}
.random-reference-desktop{position:relative;line-height:0}
.random-reference-hit{position:absolute;left:30.8383%;top:45.6954%;width:38.9222%;height:41.7219%;border-radius:999px}
.random-reference-hit:focus-visible,.random-reference-button:focus-visible{outline:3px solid #111;outline-offset:2px}
.random-reference-mobile{display:none}
@media(max-width:560px){
 .random-reference-desktop{display:none}
 .random-reference-mobile{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:8px 12px;padding:12px}
 .random-reference-cat{align-self:end}
 .random-reference-labels{align-self:center}
 .random-reference-copy,.random-reference-button{grid-column:1/-1;min-width:0}
 .random-reference-button{display:block;border-radius:999px}
}

/* Keep the adopted guide content, with live text and scalable icons. */
.cat-guide.random-clear-guide{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr) minmax(0,.85fr);grid-template-areas:"cat copy labels" "cat button labels";gap:10px 22px;padding:22px 24px 0 0;align-items:center}
.random-clear-cat{grid-area:cat;align-self:end;min-width:0;line-height:0}
.random-clear-copy{grid-area:copy;min-width:0;color:#111;font-weight:900}
.random-clear-copy h2{font-size:clamp(17px,1.2vw,22px);line-height:1.5;letter-spacing:0}
.random-clear-copy p{font-size:clamp(16px,1.1vw,20px);line-height:1.5;font-weight:900}
.random-clear-labels{grid-area:labels;min-width:0;padding:2px 0 12px}
.random-mood-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 12px}
.random-mood{display:flex;align-items:center;justify-content:center;min-height:42px;padding:5px 4px;border:2px solid;border-radius:14px;font-size:clamp(12px,.9vw,14px);font-weight:900;white-space:nowrap;line-height:1.5;box-shadow:2px 3px 0 #0000000c}
.mood-funny{color:#e92591;border-color:#f696d3;background:#ffe5f4;transform:rotate(-6deg)}
.mood-moving{color:#0789bf;border-color:#6bd8e9;background:#c4f1f8;transform:rotate(4deg)}
.mood-odd{color:#7150c9;border-color:#aa8be9;background:#eee6ff;transform:rotate(-5deg)}
.mood-useful{color:#0780bd;border-color:#c9e9f7;background:#e4f5fb;transform:rotate(3deg)}
.random-clear-labels>.icon{display:block;width:32px;height:32px;margin:18px 5px 0 auto;transform:rotate(15deg);color:#111}
.random-clear-button{grid-area:button;display:flex;align-items:center;justify-content:center;gap:15px;width:100%;min-height:62px;margin-bottom:20px;padding:12px 20px;border-radius:999px;background:#fff32c;color:#111;box-shadow:0 3px 0 #dbc923;font-size:clamp(19px,2vw,28px);font-weight:900;line-height:1.5}
.random-clear-button>.icon{width:30px;height:30px;stroke-width:2.5}
.random-clear-button:hover{background:#ffe925}
.random-clear-button:focus-visible{outline:3px solid #2760d6;outline-offset:4px}
@media(max-width:850px){
 .cat-guide.random-clear-guide{gap:8px 14px;padding:18px 18px 0 0;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr) minmax(0,1fr)}
 .random-mood-grid{gap:12px 8px}.random-mood{min-height:36px;padding:4px;font-size:12px}
 .random-clear-button{gap:10px;min-height:54px;padding:10px 14px;font-size:19px}
 .menu-toggle{width:56px;height:56px;padding:1px 2px;display:flex;flex-direction:column;gap:1px;border:1px solid #d9d9d9;background:#fff;color:#171a1c;border-radius:10px;justify-content:center}
 .menu-toggle>.icon{width:32px;height:32px;stroke-width:2.3}
 .menu-toggle .menu-close-icon{display:none}
 .menu-toggle[aria-expanded="true"]>.icon:not(.menu-close-icon){display:none}
 .menu-toggle[aria-expanded="true"]>.menu-close-icon{display:block}
 .menu-toggle-label{font-size:12px;font-weight:700;line-height:1.3;white-space:nowrap}
 .mobile-menu:not([hidden]){display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;position:relative;z-index:2;background:#fff;border:1px solid #d9d9d9;border-radius:12px;box-shadow:0 8px 20px #171a1c14;padding:8px 14px 14px;margin-bottom:16px}
 .mobile-menu>a{width:100%;min-height:52px;padding:13px 8px;background:#fff;border-radius:0;border-bottom:1px solid #e9e9e9;font-size:17px;font-weight:700;line-height:1.5}
 .mobile-menu>a[aria-current]{background:#fff9b7;box-shadow:inset 4px 0 #e1c800;padding-left:14px}
 .mobile-menu .search-form{margin:14px 0 0;min-height:48px;max-width:none}
 .mobile-menu .search-form input{font-size:16px}
}
@media(max-width:560px){
 .cat-guide.random-clear-guide{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"cat labels" "copy copy" "button button";gap:12px;padding:14px}
 .random-clear-copy h2{font-size:clamp(17px,4.7vw,24px)}
 .random-clear-copy p{font-size:clamp(15px,4.15vw,22px)}
 .random-clear-labels{padding:2px 1px 0 0}
 .random-mood-grid{gap:14px 9px}
 .random-mood{min-height:34px;font-size:clamp(11px,3.05vw,16px);padding:4px 3px;border-radius:10px}
 .random-clear-labels>.icon{width:28px;height:28px;margin:15px 0 0 auto}
 .random-clear-button{min-height:62px;gap:13px;font-size:clamp(20px,5.7vw,27px);margin:0;padding:12px}
 .random-clear-button>.icon{width:28px;height:28px}
}