:root{--primary:#b88b48;--bg:#faf8f3;--radius:20px;color:#242323;font-family:system-ui,sans-serif;background:var(--bg)}*{box-sizing:border-box}body{margin:0}header{height:100px;padding:calc(10px + env(safe-area-inset-top)) 20px 10px;display:flex;align-items:center;justify-content:space-between;background:white;position:sticky;top:0;z-index:2}header img{width:160px;max-width:50vw;max-height:65px;object-fit:contain}button,a,input,textarea,select{font:inherit}button{cursor:pointer;border:0;border-radius:12px;padding:12px 16px;background:var(--primary);color:white}header button{background:transparent;color:#333;font-size:26px}main{max-width:850px;margin:auto;padding:24px 18px calc(110px + env(safe-area-inset-bottom))}h1{font-size:28px}h2{font-size:20px}.card{display:block;background:white;border:1px solid #e8e3d9;border-radius:var(--radius);padding:20px;margin:14px 0;box-shadow:0 8px 28px #40341008}.card p,.answer{white-space:pre-wrap;line-height:1.7}.muted{color:#706b64;font-size:14px}a{color:#805b29;text-decoration:none}.link{display:inline-block;padding:12px 0;text-decoration:underline}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}.card img{max-width:100%;max-height:340px;object-fit:contain}nav{position:fixed;bottom:0;left:0;right:0;background:white;border-top:1px solid #e8e3d9;display:flex;justify-content:space-around;padding:10px 4px calc(10px + env(safe-area-inset-bottom));z-index:3}nav button{background:transparent;color:#5c554d;padding:10px;font-size:12px}nav button.active{background:#f0e7d7;color:#533a17}input,textarea,select{display:block;width:100%;padding:14px;border:1px solid #d9d2c7;border-radius:12px;margin:10px 0;background:white}textarea{min-height:130px}form button{margin:8px 6px 8px 0}aside{position:fixed;top:100px;left:12px;right:12px;max-height:65vh;overflow:auto;background:white;box-shadow:0 12px 40px #0003;border-radius:20px;padding:20px;z-index:4}aside a{display:block;padding:16px;border-bottom:1px solid #eee}dialog{width:min(92vw,850px);max-height:88vh;overflow:auto;border:0;border-radius:24px;padding:24px}dialog::backdrop{background:#0008}dialog img,video{max-width:100%}iframe{width:100%;height:65vh;border:0}#status:empty{display:none}#status{position:fixed;bottom:100px;left:5%;right:5%;padding:15px;background:#292723;color:white;border-radius:12px;z-index:8}#close{float:right}.row{display:flex;gap:8px;align-items:center}.row input{flex:1}button:disabled{opacity:.55}body[data-kit=midnight]{--bg:#e9edf3}body[data-kit=rose]{--bg:#fff2f3}body[data-kit=botanic]{--bg:#f0f6ee}body[data-kit=ocean]{--bg:#eef7fa}@media(prefers-reduced-motion:no-preference){main{animation:enter .3s ease}@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}

main.website-mode{max-width:none;padding:0 0 calc(90px + env(safe-area-inset-bottom))}.website-tools{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px;background:#fff;border-top:1px solid #eee}.website-tools button,.website-tools a{font-size:12px;padding:8px 10px}.website-frame{display:block;width:100%;height:calc(100vh - 230px);height:calc(100dvh - 230px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:320px;border:0;background:#fff}.website-extra{max-width:850px;padding:0 18px 20px;margin:auto}

/* Fluid layout for Safari, installed PWA, split view and rotated displays. */
:root{--viewport-height:100vh;--header-height:calc(80px + env(safe-area-inset-top,0px));--nav-height:calc(68px + env(safe-area-inset-bottom,0px));--tools-height:48px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@supports(height:100dvh){:root{--viewport-height:100dvh}}
html{min-width:0;scroll-padding-top:var(--header-height)}
body{min-width:0;min-height:var(--viewport-height);overflow-wrap:anywhere}
header{height:auto;min-height:calc(76px + env(safe-area-inset-top,0px));padding:calc(8px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px));display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:8px}
header img{justify-self:center;max-width:100%;max-height:clamp(42px,8vw,64px)}
header button{min-width:44px;min-height:44px;padding:8px;line-height:1}
main{width:100%;max-width:1100px;padding:clamp(16px,3vw,28px) max(16px,env(safe-area-inset-right,0px)) calc(var(--nav-height) + 24px) max(16px,env(safe-area-inset-left,0px))}
main.website-mode{padding:0 max(0px,env(safe-area-inset-right,0px)) var(--nav-height) max(0px,env(safe-area-inset-left,0px))}
.website-frame{height:max(120px,calc(var(--viewport-height) - var(--header-height) - var(--nav-height) - var(--tools-height)));min-height:120px;max-width:100%}
.website-tools{flex-wrap:wrap;gap:6px;padding:6px}
.website-tools button,.website-tools a{min-height:36px;display:inline-flex;align-items:center;justify-content:center}
.website-extra{max-width:1100px;padding:0 clamp(12px,3vw,28px) 20px}
nav{justify-content:flex-start;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:6px max(6px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))}
nav button{flex:1 0 64px;min-height:44px;min-width:0;padding:8px 6px;font-size:clamp(11px,1.8vw,14px);white-space:normal;overflow-wrap:anywhere}
aside{top:calc(var(--header-height) + 8px);left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));max-width:650px;max-height:calc(var(--viewport-height) - var(--header-height) - var(--nav-height) - 24px);padding:clamp(12px,3vw,20px);overscroll-behavior:contain}
dialog{width:min(92%,850px);max-width:calc(100% - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 24px);max-height:calc(var(--viewport-height) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px);padding:clamp(14px,3vw,24px);overscroll-behavior:contain}
dialog iframe{height:clamp(160px,calc(var(--viewport-height) * .65),900px)}
input,textarea,select{font-size:16px;min-width:0;max-width:100%}
.row{min-width:0;flex-wrap:wrap}.row input{flex:1 1 160px;min-width:0}.row button{flex-shrink:0;min-height:44px}
.grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.card{min-width:0;padding:clamp(14px,3vw,22px)}
h1{font-size:clamp(22px,4vw,32px)}h2{font-size:clamp(18px,3vw,23px)}
#status{bottom:calc(var(--nav-height) + 8px);left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));max-height:calc(var(--viewport-height) * .4);overflow:auto}
@media(min-width:768px){header{grid-template-columns:52px minmax(0,1fr) 52px}nav{justify-content:center}nav button{flex:0 1 180px}header img{max-height:72px}.card img{max-height:500px}}
@media(orientation:landscape) and (max-height:540px){header{min-height:calc(52px + env(safe-area-inset-top,0px));padding-top:calc(4px + env(safe-area-inset-top,0px));padding-bottom:4px}header img{max-height:40px}nav{padding-top:2px;padding-bottom:calc(2px + env(safe-area-inset-bottom,0px))}.website-tools{padding:2px}.website-tools button,.website-tools a{min-height:32px}}
main:not(.website-mode),.website-extra{max-width:var(--content-width,1100px)}
body[data-ios-tools=hidden] .website-tools,body[data-ios-install=hidden] .install-card,body[data-ios-bot=hidden] .ask-bot{display:none}
body[data-app-access=blocked] header,body[data-app-access=blocked] nav,body[data-app-access=blocked] #pages{display:none!important}
body[data-app-access=blocked] main{min-height:var(--viewport-height);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;gap:12px}