/* 48px icons unfold into measured labels; real flex widths let neighbours move with them. */
body .yee-action{
  --icon-label-width:48px;
  box-sizing:border-box!important;display:inline-flex!important;
  flex:0 0 auto!important;align-items:center!important;justify-content:flex-start!important;
  width:48px!important;min-width:48px!important;max-width:none!important;
  height:48px!important;min-height:48px!important;padding:0!important;gap:0!important;
  overflow:hidden!important;border:1px solid var(--line,rgba(32,40,32,.22));border-radius:999px!important;
  background:transparent;color:inherit;font:500 14px/1 var(--sans,system-ui)!important;
  letter-spacing:0!important;white-space:nowrap;text-decoration:none!important;
  cursor:pointer;vertical-align:middle;animation:none!important;transform:none!important;
  transition:width 300ms cubic-bezier(.22,.61,.36,1),background-color 220ms ease,border-color 220ms ease,box-shadow 220ms ease!important;
}
body .yee-action .yee-action-icon{
  display:flex!important;align-items:center;justify-content:center;flex:0 0 46px;
  width:46px!important;height:46px!important;padding:0!important;margin:0!important;color:inherit;
  background:none!important;border:0!important;box-shadow:none!important;
}
body .yee-action .yee-action-icon svg{
  display:block!important;width:20px!important;height:20px!important;margin:0!important;
  fill:none!important;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transform:none!important;opacity:1!important;
}
body .yee-action .yee-action-label{
  display:block!important;flex:0 0 auto;width:max-content!important;height:auto!important;
  font:inherit!important;letter-spacing:inherit!important;line-height:1!important;
  color:inherit;padding:0 16px 0 0!important;margin:0!important;white-space:nowrap;
  background:none!important;border:0!important;box-shadow:none!important;
  opacity:0!important;transform:translateX(-4px);
  transition:opacity 160ms ease,transform 220ms cubic-bezier(.22,.61,.36,1);
}
body .yee-action[data-icon-ready]:focus-visible{width:var(--icon-label-width)!important}
body .yee-action[data-icon-ready]:focus-visible .yee-action-label{opacity:1!important;transform:translateX(0);transition-delay:80ms}
body .yee-action:focus-visible{outline:2px solid var(--accent,#879956);outline-offset:4px}
body .yee-action:disabled{opacity:.45;cursor:default}
body .yee-action[hidden]{display:none!important}
body .yee-action[aria-busy=true]{width:var(--icon-label-width)!important}
body .yee-action[aria-busy=true] .yee-action-label{opacity:1!important;transform:none}
@media(hover:hover) and (pointer:fine){
  body .yee-action[data-icon-ready]:hover{width:var(--icon-label-width)!important;box-shadow:0 0 18px rgba(139,165,89,.11)}
  body .yee-action[data-icon-ready]:hover .yee-action-label{opacity:1!important;transform:translateX(0);transition-delay:80ms}
}
/* Operation groups keep one row while widths interpolate together. */
body :is(.gallery-hero-actions,.quiz-actions,.lab-actions,.comic-controls,.vf-actions,.flip-bottom,.back-bottom,.footer-links){display:flex;align-items:center;flex-wrap:nowrap;gap:10px}
body .comic-controls{width:auto;grid-template-columns:none}
body .flip-bottom,body .stack-slot .flip-bottom{flex-wrap:nowrap;gap:10px}
body .back-top{flex-wrap:nowrap;gap:10px}
body .back-top>span{min-width:0;flex:1}
body .site-header{gap:16px}
body .site-header nav{flex:0 0 296px;gap:8px;align-items:center;justify-content:flex-start}
body .sculpture-tools{width:min(100%,324px);justify-content:flex-start}
body .sculpture-tools .drag-hint{flex:0 0 auto}
body .site-header .menu.yee-action{display:none!important}
body .yee-action:is(.button:not(.light),.primary-button,.nav-cta,.contact-submit),
body :is(.mail-box,.letter-cover-form) .yee-action{background:var(--ink,#202820);color:var(--paper,#e9eae2)}
body .yee-action[aria-current=page]{background:var(--ink,#202820);color:var(--paper,#e9eae2)!important;border-color:var(--ink)}
body .video-fan .yee-action{border-color:rgba(233,246,215,.26);background:rgba(240,255,220,.025);color:#e7eedf}
body .video-fan .vf-watch.yee-action{background:#d6ee85;color:#202820!important;border-color:#d6ee85}
body .flip-back .yee-action{border-color:var(--gallery-back-line,rgba(233,246,215,.25))}
body .vf-controls{gap:12px}
body .vf-dots{flex:0 0 auto}
body .footer-links{grid-column:1/-1;flex-wrap:nowrap;gap:10px;justify-content:center}
body .play-button.yee-action{transform:translate(-50%,-50%)!important}
body .lead-email-row{display:flex;gap:10px;align-items:center}
body .lead-email-row input{flex:1;min-width:0}
body :is(.mail-box,.letter-cover-form,.contact-form) .yee-action{margin-top:16px}
body :is(.tab,.comic-chapter,.language-switch button,.quiz-option),body :is(.quiz-shell,.quiz-window)>button:not(.yee-action){border-radius:999px!important}
body :is(.stack-cover>span,.cover-turn){border-radius:999px}
@media(max-width:780px){
  body .site-header{gap:9px}
  body .site-header .menu.yee-action{display:inline-flex!important}
  body .site-header nav{flex:initial;gap:8px;justify-content:center;flex-wrap:wrap}
  body .comic-controls{display:flex;width:auto;justify-content:center}
  body .comic-toolbar{row-gap:20px}
  body .footer-links{justify-content:flex-start;max-width:100%;overflow-x:auto;padding:6px 0}
  body .vf-controls{gap:8px}
  body .vf-dots{gap:0}
}
@media(hover:none),(pointer:coarse){
  body .yee-action,body .yee-action[data-icon-ready]{width:max-content!important}
  body .yee-action .yee-action-label{opacity:1!important;transform:none;transition-delay:0ms}
  body :is(.gallery-hero-actions,.quiz-actions,.lab-actions,.comic-controls,.vf-actions,.flip-bottom,.back-bottom,.footer-links){flex-wrap:wrap}
  body .footer-links{justify-content:center;overflow:visible}
  body .sculpture-tools{flex-wrap:wrap;gap:6px}
  body .sculpture-tools .drag-hint{flex-basis:100%}
  body .stack-slot .flip-bottom,body .back-top{flex-wrap:wrap}
  body .vf-controls{flex-wrap:wrap}
  body .vf-controls .vf-dots{order:3;width:100%;justify-content:center}
  body .site-header .menu.yee-action{width:48px!important}
  body .site-header .menu .yee-action-label{opacity:0!important}
}
@media(max-width:380px){
  body .site-header .brand-wordmark{width:76px}
  body .site-header .yee-action{font-size:12px!important}
}
@media(prefers-reduced-motion:reduce){
  body .yee-action,body .yee-action .yee-action-label{transition:none!important}
  body .yee-action .yee-action-label{transform:none}
}