/* Painted storybook controls. */
body{-webkit-user-select:none;user-select:none}
.activity-nav{grid-template-columns:repeat(2,1fr);gap:20px}
.nav-button{position:relative;isolation:isolate;min-height:101px;padding:12px 28px;gap:22px;background:linear-gradient(135deg,#f8f1de,#e7e9d4);border:2px solid #9b9e7f;border-radius:19px 25px 18px 23px;box-shadow:0 5px 0 #98947450,inset 0 2px 0 #fff9e9;transition:transform .18s,box-shadow .18s}
.nav-button:before{content:"";position:absolute;inset:6px;border:1px dashed #8d916c70;border-radius:13px 19px 12px 17px;pointer-events:none;z-index:-1}
.nav-button.active{background:linear-gradient(135deg,#f9dfa0,#eac270);border-color:#8e7851;box-shadow:0 5px 0 #9c855d66,inset 0 2px 0 #fff0c9;transform:rotate(-.45deg)}
.nav-button:not(.active){transform:rotate(.25deg)}
.nav-button:hover{transform:translateY(-3px) rotate(-.3deg);box-shadow:0 8px 0 #98947450,inset 0 2px 0 #fff9e9}
.nav-art{width:82px;height:76px;object-fit:contain;flex-shrink:0;filter:drop-shadow(1px 3px 1px #64532b32);transform:rotate(-4deg);transition:transform .2s}
.nav-button:nth-child(2) .nav-art{width:72px;transform:rotate(5deg)}
.nav-button:hover .nav-art{transform:rotate(0) scale(1.07)}
.nav-button>span{font-size:20px}.nav-button small{font-size:10px;letter-spacing:1.7px;margin-bottom:3px}
.storybook-button{position:relative;background-image:linear-gradient(135deg,#fff6ce40,#b9924012);box-shadow:0 4px 0 #9f9271,inset 0 2px 0 #fff4cb8c}
.storybook-button:before{content:"";position:absolute;inset:4px;border:1px dashed #9d875d50;border-radius:7px 10px 7px 9px;pointer-events:none}
.storybook-button.honey{background-image:linear-gradient(135deg,#ffe7a38c,#d9a84825)}
.illustrated-icon{width:25px;height:25px;object-fit:contain;vertical-align:middle;flex-shrink:0}
.pair-art>.illustrated-icon{width:82px;height:82px;filter:drop-shadow(0 3px 1px #685c3c20)}
.pair-art>svg{width:88px;height:88px;filter:drop-shadow(1px 3px 1px #73653c25)}
.pair-card{background:linear-gradient(145deg,#fcf7e6,#efead4);border-color:#a4aa87;box-shadow:0 4px 0 #c4bda063,inset 0 2px 0 #fffdf3}
.match-column:last-child .pair-card{background:linear-gradient(145deg,#f1f6e9,#dfe8d6)}
.pair-card:before{content:"";position:absolute;inset:5px;border:1px dashed #9fa88959;border-radius:9px 13px 10px 8px;pointer-events:none}
.pair-card.matched:before{border-color:#839e6959}
.match-finish{margin-top:25px;background:#f3eed8;border:1px solid #c3b58f;border-radius:15px;padding:22px;text-align:center;animation:appear .3s ease}
.match-finish h3{font-family:Georgia,serif;font-size:25px;font-weight:normal;margin:0 0 8px}.match-finish p{font-size:14px;margin-bottom:16px}.match-finish .storybook-button{white-space:normal}
@media(max-width:1000px){.nav-button{padding:12px 20px;gap:16px}.nav-button>span{font-size:18px}.nav-art{width:73px;height:68px}}
@media(max-width:740px){.activity-nav{gap:12px}.nav-button{min-height:133px;padding:11px 7px;gap:5px;border-radius:14px 19px 13px 17px}.nav-art,.nav-button:nth-child(2) .nav-art{width:68px;height:65px}.nav-button>span{font-size:15px}.nav-button small{font-size:8px;letter-spacing:1px}.pair-art>svg{width:79px;height:79px}.pair-art>.illustrated-icon{width:73px;height:73px}.pair-card{min-height:169px}.match-finish{padding:20px 12px}.match-finish h3{font-size:23px}.match-finish p{font-size:12px}}