@font-face{font-family:Nunito;src:url('../assets/Nunito-Variable.ttf') format('truetype');font-weight:200 1000;font-display:swap}
@font-face{font-family:Inter;src:url('../assets/Inter-Variable.ttf') format('truetype');font-weight:100 900;font-display:swap}
html,body,#root{height:100%;margin:0;background:#fbf7ef}#root>div{height:100%}*{box-sizing:border-box}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #ae4537;outline-offset:2px}.demo-app{display:flex;flex-direction:column;height:100dvh;max-width:640px;margin:auto;font:14px Nunito,sans-serif;color:#512b17;position:relative}.demo-status{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 6px;min-height:44px;font-size:11px;flex:none;background:#f8f4ec}.demo-status button{border:0;background:transparent;color:#714738;padding:6px;font-weight:800}.demo-content{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.demo-content>div{flex:1;min-height:0}.demo-nav{display:flex;flex:none;background:#fff8ee;border-top:1px solid #e8d9ca;padding:6px 8px 0;gap:2px}.demo-nav button{border:0;background:transparent;flex:1;min-width:0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#714738;font-weight:800;font-size:12px;border-radius:14px}.demo-nav button[aria-current]{background:#f6e4d4;color:#843e21}.demo-footnote{text-align:center;background:#fff8ee;padding:5px 4px 9px;font-size:10px;color:#715c4d;flex:none}.demo-toast{position:absolute;bottom:100px;left:12px;right:12px;background:#23452f;color:#fffaf0;padding:14px;border-radius:14px;box-shadow:0 6px 24px #1233;display:flex;gap:10px;align-items:flex-start;z-index:20}.demo-toast button{background:none;border:none;color:inherit;font-size:23px;padding:0 5px}

.demo-nav .demo-guide-button{background:#fbe5d0;min-height:80px;gap:0;color:#6e361c}.demo-guide-button img{display:block;width:44px;height:54px;object-fit:contain;transition:transform 180ms ease}.demo-guide-button:hover img{transform:translateY(-2px)}.demo-guide-button[aria-expanded=true]{outline:2px solid #b7663b;outline-offset:-2px}.demo-guide-portrait{display:block;width:110px;height:auto;max-width:100%}.demo-toast{bottom:116px}
@media(prefers-reduced-motion:reduce){.demo-guide-button img{transition:none}.demo-guide-button:hover img{transform:none}}