/* Shared chrome for React-ported pages (demo, about, blog, tv). Design tokens from the Base44 app. */
:root{--cream:#F4F0E2;--maroon:#2B0000;--rust:#C45A3D;--tan:#DCCBA9;--body:#6E5A50;--paper:#FFFDF5}
*{box-sizing:border-box}
html,body{margin:0;background:var(--cream);color:var(--maroon);font-family:'General Sans',sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.serif{font-family:'EB Garamond',Georgia,serif;font-weight:400}
.label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--body)}
.wrap{max-width:1400px;margin:0 auto;padding:0 24px}
@media(min-width:1024px){.wrap{padding:0 40px}}
/* header */
.hdr{position:sticky;top:0;z-index:40;background:rgba(244,240,226,.85);backdrop-filter:blur(6px);border-bottom:1px solid rgba(43,0,0,.1)}
.hdr .wrap{height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}.brand img{height:28px}.brand span{font-family:'EB Garamond',serif;font-size:24px;letter-spacing:-.01em}
.nav{display:none;align-items:center;gap:32px}@media(min-width:768px){.nav{display:flex}}
.nav>a,.nav .dd>button{font-size:15px;color:var(--body);background:none;border:0;padding:0;font:inherit;cursor:pointer;display:flex;align-items:center;gap:6px;transition:color .15s}
.nav>a:hover,.nav .dd:hover>button{color:var(--maroon)}
.dd{position:relative}.dd .menu{display:none;position:absolute;top:100%;left:-16px;padding-top:12px}.dd:hover .menu{display:block}
.dd .menu>div{display:flex;flex-direction:column;min-width:200px;background:var(--paper);border:1px solid rgba(43,0,0,.1);border-radius:14px;padding:8px;box-shadow:0 20px 40px -16px rgba(43,0,0,.25)}
.dd .menu a{font-size:15px;padding:10px 14px;border-radius:9px}.dd .menu a:hover{background:rgba(220,203,169,.3)}
.hdr-r{display:flex;align-items:center;gap:16px}.hdr-r .signin{font-size:14px;color:rgba(43,0,0,.8)}.hdr-r .signin:hover{color:var(--rust)}
.btn-pill{display:inline-flex;align-items:center;border-radius:9999px;padding:10px 20px;font-size:14px;font-weight:500;background:var(--maroon);color:var(--cream);transition:opacity .15s}.btn-pill:hover{opacity:.85}
.hide-sm{display:none}@media(min-width:640px){.hide-sm{display:inline-flex}}
/* footer */
.ftr{border-top:1px solid rgba(43,0,0,.15);margin-top:128px}
.ftr-grid{padding:64px 0;display:grid;gap:48px}@media(min-width:1024px){.ftr-grid{grid-template-columns:1.4fr 1fr 1fr}}
.ftr p.tag{margin:12px 0 0;font-size:14px;color:rgba(43,0,0,.7);max-width:360px}
.ftr ul{list-style:none;margin:0;padding:0;font-size:14px}.ftr li+li{margin-top:12px}.ftr li a:hover{color:var(--rust)}
.ftr .label{margin-bottom:16px}
.ftr-bot{border-top:1px solid rgba(43,0,0,.1)}.ftr-bot .wrap{padding:24px 0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:rgba(43,0,0,.5)}@media(min-width:640px){.ftr-bot .wrap{flex-direction:row}}
.sub{display:flex;gap:8px;margin-top:32px;max-width:420px}.sub input{flex:1;height:44px;padding:0 14px;border:1px solid rgba(43,0,0,.25);border-radius:9999px;background:transparent;font:inherit;font-size:14px;color:var(--maroon);outline:none}.sub input:focus{border-color:var(--maroon)}
.sub button{height:44px;padding:0 18px;border:0;border-radius:9999px;background:var(--maroon);color:var(--cream);font:inherit;font-size:14px;font-weight:500;cursor:pointer}
/* forms */
.field{width:100%;height:48px;padding:0 14px;background:transparent;border:1px solid rgba(43,0,0,.25);border-radius:8px;font:inherit;font-size:14px;color:var(--maroon);outline:none}.field:focus{border-color:var(--maroon)}
.flabel{display:block;margin-bottom:8px}