/* Studio changes content and positions; the original illustrated skin stays intact. */
.reference-site .shell{width:var(--site-width,100%);max-width:100%;margin-inline:auto}
.studio-background{inset:0!important;width:100%!important;height:100%!important;object-fit:cover;position:absolute;transform:none!important}
.studio-decoration{position:absolute;border:0;padding:0;background:none;overflow:visible}
.studio-decoration>img,[data-studio-object]>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.studio-sway>img{animation:studio-sway 4s ease-in-out infinite;transform-origin:50% 0}
@keyframes studio-sway{50%{transform:rotate(3deg)}}
.category-card:where(a){text-decoration:none}
.category-custom-content{position:absolute;inset:8% 9% 9% 5%;display:flex;align-items:center;gap:5%;padding:2% 3%;background:var(--category-color);color:#fff1cf;text-align:left}
.category-custom-content>img{width:24%;height:85%;object-fit:contain}
.category-custom-content>span{display:grid;gap:5px}
.category-custom-content strong{font:700 clamp(13px,1.7vw,23px)/1.1 var(--pixel);text-transform:uppercase}
.category-custom-content small{font:clamp(10px,1.2vw,17px)/1.2 var(--mono)}
/* The reference itself is 1086px wide: retain its four-card composition there. */
@media(min-width:1000px){
  .reference-site #tools-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 1.2%;padding:0 2.9466%;max-width:none}
  .reference-site .category-translation strong{font-size:clamp(14px,1.48vw,18px)}
}
@media(min-width:768px){
  .reference-site #main-nav{left:var(--menu-headerLeft,6.8%);right:var(--menu-headerRight,55.2%);width:auto}
  .reference-site #main-nav :is(a,button){width:20%;justify-content:center}
  .reference-site #main-nav :is(a,button):hover,.reference-site .site-footer nav :is(a,button):hover{background:#ffebbe18;outline:1px solid #e9c77b77;outline-offset:-3px}
  .reference-site .site-footer nav{left:var(--menu-footerLeft,40.2%);width:var(--menu-footerWidth,25.7%)}
  .reference-site nav.has-custom-menu{background:#623b25 url('../assets/site/wood-grain.svg') repeat;gap:0}
  .reference-site nav.has-custom-menu :is(a,button){color:var(--menu-textColor,#ffedc7);font:700 clamp(11px,1.4vw,var(--menu-fontSize,20px))/1.1 var(--pixel);flex:1;width:auto;justify-content:center;padding-inline:var(--menu-padding,12px)}
  .reference-site nav.has-custom-menu :is(a,button):hover{background:var(--menu-hoverColor,#6f8539);outline-color:var(--menu-borderColor,#273e1d)}
  .tools-heading.has-custom-copy h2,.tools-heading.has-custom-copy>p{clip:auto;clip-path:none;position:absolute;width:46%;height:auto;overflow:visible;text-align:center;white-space:normal;margin:0;left:27%;padding:0;background:#f4dfb8;color:#432b1c}
  .tools-heading.has-custom-copy h2{top:16%;min-height:40%;font:700 clamp(20px,3vw,38px)/1.2 var(--pixel);text-transform:uppercase}
  .tools-heading.has-custom-copy>p{top:55%;font:clamp(13px,1.5vw,22px)/1.3 var(--mono);text-transform:uppercase}
  .quest-copy.has-custom-copy{color:#3b271c;background:#f4dfb8;padding:3px;text-align:center;left:33%;top:26%;width:31%;height:40%}
  .quest-copy.has-custom-copy h2{font:700 clamp(12px,1.6vw,24px)/1.1 var(--pixel);text-transform:uppercase}
  .quest-copy.has-custom-copy p{font:clamp(10px,1.2vw,18px)/1.2 var(--mono);margin-top:7px}
  .explore-button.has-custom-copy{background:#bd5624;color:#ffedc5;font:700 clamp(12px,1.4vw,21px)/1.1 var(--pixel);border:2px solid #5b321d;display:grid;place-items:center;text-align:center}
  .site-footer .footer-tagline.has-custom-copy{font:clamp(10px,1.2vw,17px)/1.2 var(--mono);background:#623b25;color:#f5deb9;padding:2px}
}
@media(max-width:767px){
  .reference-site #main-nav.has-custom-menu{background:#623b25 url('../assets/site/wood-grain.svg') repeat}
  .reference-site .tool-search-wrap{right:auto}
  .reference-site .tools-heading h2,.reference-site .tools-heading>p{background:#f4dfb8}
  .category-custom-content strong{font-size:clamp(17px,4vw,24px)}
  .category-custom-content small{font-size:clamp(12px,3vw,18px)}
}
@media(prefers-reduced-motion:reduce){.studio-sway>img{animation:none}}

/* One live pixel font throughout the homepage. Sizes match source-art roles. */
.live-typography{--mono:var(--pixel);font-family:var(--pixel);font-weight:700}
.live-typography :is(button,input,select,textarea,kbd){font-family:var(--pixel)}
.live-typography .live-lettering{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1;font-family:var(--pixel);font-weight:700}
.live-typography .live-lettering text{font-family:var(--pixel);font-weight:700}
.live-typography :is(.site-header,.quest-cta,.site-footer){container-type:inline-size}
.live-typography .hero-lettering{z-index:3}
.live-typography .site-header :is(nav,.tool-search-wrap){z-index:2}
.live-typography.reference-site #main-nav :is(a,button){color:var(--menu-textColor,#ffedc7);font:700 calc(var(--menu-source-size,18) * 100cqw / 1086)/1.1 var(--pixel);padding-inline:var(--menu-live-padding,0px);min-width:0;text-shadow:1px 1px #432719;white-space:nowrap}
.live-typography.reference-site #main-nav.has-custom-menu{background:none}
.live-typography .tool-search-wrap input{font:700 1.289134cqw/1.1 var(--pixel)}
.live-typography .tool-search-wrap>span,.live-typography .social-links button{font-family:var(--pixel)}
.live-typography .tools-heading :is(h2,p){clip:auto;clip-path:none;position:absolute;left:29%;width:42%;right:auto;height:auto;overflow:visible;white-space:normal;margin:0;padding:0;color:#432b1c;background:none;text-align:center;z-index:2}
.live-typography .tools-heading h2{top:23%;min-height:0;font:700 2.762431cqw/1.1 var(--pixel);text-transform:uppercase}
.live-typography .tools-heading>p{top:59%;font:700 1.289134cqw/1.2 var(--pixel);text-transform:uppercase}
.live-typography .all-tools-filter{z-index:3}
.live-typography .category-custom-content{z-index:1}
.live-typography .category-lettering{z-index:2}
.live-typography .quest-copy,.live-typography .quest-copy.has-custom-copy{z-index:2;left:33%;top:28%;width:29%;height:auto;color:#432b1c;background:none;padding:0;text-align:center}
.live-typography .quest-copy h2,.live-typography .quest-copy.has-custom-copy h2{font:700 1.841620cqw/1.1 var(--pixel);text-transform:uppercase;margin:0}
.live-typography .quest-copy p,.live-typography .quest-copy.has-custom-copy p{font:700 1.289134cqw/1.2 var(--pixel);text-transform:uppercase;margin:7px 0 0}
.live-typography .explore-button,.live-typography .explore-button.has-custom-copy{z-index:2;left:66%;top:32%;width:15%;height:25%;padding:0;border:0;background:none;box-shadow:none;color:#fff0cd;font:700 1.473296cqw/1.1 var(--pixel);text-transform:uppercase;display:flex;align-items:center;justify-content:center;text-align:center}
.live-typography .site-footer .footer-tagline,.live-typography .site-footer .footer-tagline.has-custom-copy{z-index:2;left:14.5%;top:42%;width:22%;padding:0;margin:0;background:none;color:#ffedc7;font:700 1.289134cqw/1.1 var(--pixel)}
.live-typography.reference-site .site-footer nav{z-index:2;left:var(--menu-footerLeft,40.2%);width:var(--menu-footerWidth,25.7%);gap:0;background:none}
.live-typography.reference-site .site-footer nav :is(a,button){display:flex;justify-content:center;min-width:0;width:auto;flex:1 0 auto;padding:0;color:var(--menu-textColor,#ffedc7);font:700 1.473296cqw/1.1 var(--pixel);white-space:nowrap}
.live-typography .subfooter{font:700 14px/1.2 var(--pixel)}
.live-typography .site-dialog{font-family:var(--pixel);font-size:16px;line-height:1.5}
.live-typography .site-dialog :is(p,a,.eyebrow){font-family:var(--pixel)}
@media(max-width:767px){
 .live-typography .header-lettering,.live-typography .footer-lettering,.live-typography .cta-lettering{display:none}
 .live-typography.reference-site #main-nav{z-index:12}
 .live-typography.reference-site #main-nav :is(a,button){font-size:18px;justify-content:flex-start;padding:6px 15px;min-height:44px}
 .live-typography.reference-site #main-nav.has-custom-menu{background:#623b25 url('../assets/site/wood-grain.svg') repeat}
 .live-typography .tool-search-wrap input{font-size:14px}
 .live-typography .tools-lettering{display:none}
 .live-typography .tools-heading :is(h2,p){left:8%;width:84%;background:none}
 .live-typography .tools-heading h2{top:calc(var(--decor-height) + 7px);font-size:30px}
 .live-typography .tools-heading>p{top:calc(var(--decor-height) + 43px);font-size:14px}
 .live-typography .quest-copy,.live-typography .quest-copy.has-custom-copy{left:44%;top:22px;width:52%}
 .live-typography .quest-copy h2,.live-typography .quest-copy.has-custom-copy h2{font-size:18px;line-height:1.15}
 .live-typography .quest-copy p,.live-typography .quest-copy.has-custom-copy p{font-size:14px;line-height:1.2;margin-top:9px}
 .live-typography .explore-button,.live-typography .explore-button.has-custom-copy{left:47%;top:139px;width:48%;height:auto;min-height:45px;padding:8px 10px;border:2px solid #563018;box-shadow:inset 0 2px #efa451,2px 3px #996332;background:#c85b25;font-size:16px}
 .live-typography .site-footer .footer-tagline,.live-typography .site-footer .footer-tagline.has-custom-copy{position:static;width:170px;font-size:14px}
 .live-typography.reference-site .site-footer nav{position:static;width:100%;gap:15px}
 .live-typography.reference-site .site-footer nav :is(a,button){width:auto;font-size:16px}
 .live-typography .subfooter{font-size:12px}
}

/* Three real navigation links and a native, keyboard-accessible language menu. */
.language-switcher{position:absolute;left:33%;top:18%;width:21%;height:63%;z-index:3;display:block}
.language-switcher select{width:100%;height:100%;min-height:0;border:2px solid #422919;border-radius:2px;background:#714329 url('../assets/site/wood-grain.svg');color:#fff0ca;box-shadow:inset 0 1px #b57e43;padding:0 8px;font:700 1.473296cqw/1.1 var(--pixel);cursor:pointer}
.language-switcher option{background:#613b27;color:#fff0ca;font-size:16px}
.live-typography .all-tools-filter[aria-pressed=false]::after{content:attr(data-show-label)}
@media(min-width:768px){
 .live-typography.reference-site #main-nav{left:6.8%;right:auto;width:22.8%}
 .live-typography.reference-site #main-nav :is(a,button){width:33.333%;flex:1;min-width:0;font-size:1.473296cqw;padding:0}
 .live-typography .explore-button,.live-typography .explore-button.has-custom-copy{left:65.4%;width:15.7%;font-size:1.381215cqw}
}
@media(max-width:767px){
 .live-typography .site-header{height:102px;padding-bottom:49px;gap:7px}
 .language-switcher{left:10px;right:10px;top:auto;bottom:5px;width:auto;height:35px}
 .language-switcher select{font-size:15px;padding-inline:10px}
 .live-typography.reference-site #main-nav :is(a,button){font-size:18px}
 .live-typography .quest-copy h2,.live-typography .quest-copy.has-custom-copy h2{font-size:17px}
 .live-typography .quest-copy p,.live-typography .quest-copy.has-custom-copy p{font-size:13px}
 .live-typography .explore-button,.live-typography .explore-button.has-custom-copy{top:153px;font-size:14px}
 .live-typography .site-footer .footer-tagline{width:min(200px,100%)}
}