.site-chrome[hidden]{display:none;}
:root{--site-header-height:64px;--site-footer-height:96px;}
.quiet-header,.quiet-footer{position:fixed;left:0;right:0;z-index:40;background:var(--ivory);text-align:center;}
.quiet-header{top:0;padding:8px 16px calc(8px + env(safe-area-inset-top));border-bottom:1px solid var(--line);}
.quiet-footer{bottom:0;padding:8px 16px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);}
.quiet-nav,.quiet-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;}
.quiet-nav button,.quiet-footer button{border:0;background:transparent;color:var(--violet);padding:10px 6px;min-height:44px;cursor:pointer;font-family:Arial,Helvetica,sans-serif;font-size:13px;}
.quiet-nav button:hover,.quiet-footer button:hover{text-decoration:underline;}
.quiet-nav button:focus-visible,.quiet-footer button:focus-visible{outline:2px solid var(--violet);outline-offset:2px;}
.quiet-footer p{margin:0;font-size:12px;color:var(--violet);line-height:1.5;}
.site-ready .experience{padding-top:calc(var(--site-header-height) + clamp(24px,5svh,48px));padding-bottom:calc(var(--site-footer-height) + 28px);}
.site-ready .question-panel{scroll-margin-top:calc(var(--site-header-height) + 20px);scroll-margin-bottom:calc(var(--site-footer-height) + 20px);}
.site-ready .exploration{position:fixed;inset:var(--site-header-height) 0 var(--site-footer-height);z-index:30;padding:20px 22px;min-height:0;}
.site-ready .exploration-inner{max-height:100%;padding:16px 10px 24px;}
@media(max-width:700px){
  .quiet-header,.quiet-footer{padding-left:8px;padding-right:8px;}
  .quiet-nav,.quiet-footer nav{gap:2px 10px;}
  .quiet-nav button,.quiet-footer button{font-size:12px;padding:10px 4px;}
  .quiet-footer p{font-size:11px;}
  .site-ready .exploration{padding:12px 12px;}
}

.quiet-nav a,.quiet-footer a{display:inline-flex;align-items:center;text-decoration:none;color:var(--violet);padding:10px 6px;min-height:44px;font-family:Arial,Helvetica,sans-serif;font-size:13px;}
.quiet-nav a:hover,.quiet-footer a:hover{text-decoration:underline;}
.quiet-nav a:focus-visible,.quiet-footer a:focus-visible{outline:2px solid var(--violet);outline-offset:2px;}
a.tree-option{text-decoration:none;display:block;}
@media(max-width:700px){.quiet-nav a,.quiet-footer a{font-size:12px;padding:10px 4px;}}
