@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Spline+Sans+Mono:ital,wght@0,300..700;1,300..700&display=swap');

    :root {
      --bg: #FFD94D;
      --ink:#4E0000;
      --be-yellow:#FFD94D; /* primary highlight */
      --be-blue:#2E5CFF;   /* accent */
      --be-red:#E63946;    /* accent */
      --muted:#441818;
      --card:#FFFFcc;
      --radius:12px;
      --max-width:1100px;
      --serif: 'Caprasimo', Georgia, serif;
      --sans: 'Spline Sans Mono', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    }
    
    html,body {
		height:100%
	}
    
    body {
		background:var(--bg);
		color:var(--ink);
		font-family:var(--sans);
		line-height:1.55;
		margin:0;
		-webkit-font-smoothing:antialiased;
		-moz-osx-font-smoothing:grayscale;
		font-weight: 500;
    }
    
    .container {
		max-width:var(--max-width);margin:36px auto;padding:0 20px;
	}
    
    header{display:flex;align-items:center;justify-content:space-between;gap:20px}
    
    .brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
    
    .logo {
      width:content-width;
      height:content-height;
      border-radius:10px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg,var(--be-yellow),#FFF2CC);
      box-shadow:0 6px 18px rgba(46,92,255,0.08), inset 0 -6px 16px rgba(0,0,0,0.02);
      border: 3px solid white;
      font-family:var(--serif); font-weight:700; color:var(--be-blue);
      font-size:18px;
    }
    
    .logo > img {
		width: 7vh;
		border-radius:10px;
    }
    
    #textlogo { 
		font-size: 6em;
		font-weight: 500;
		font-family: var(--serif);
		margin: -1vh 0vh 0vh 0vh;
		padding: 0px;
		vertical-align: top;
		display: inline-;
		line-height: 111%;
    }
    
    h1{font-family:var(--serif);font-weight:500;color:var(--be-ink);font-size:3.2vh;margin:8px 0; line-height:110%;}
    
    .tagline{color:var(--muted);font-size:15px;max-width:60ch; line-height: 150%;}
    
    .cta {display:flex;gap:12px}
    
    .btn{
      display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:none;cursor:pointer;font-weight:600;
      background:var(--be-red);color:white;text-decoration:none;font-family:var(--sans)
    }
    
    .btn.secondary{background:var(--be-red);border:1px solid rgba(46,92,255,0.14);color:white;}
    
    .hero{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start;margin-top:28px}
    
    .card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:0 6px 18px rgba(33,37,41,0.04);border:1px solid rgba(0,0,0,0.03)}
    
    /* features */
    .features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
    .feature h3{margin:0 0 8px 0;font-family:var(--serif);color:var(--be-red);font-size:18px}
    .feature p{margin:0;color:var(--muted);font-size:13px}
    
    /* right column: demo feed */
    aside.card {
		background: #09bd0f;
		background: linear-gradient(135deg, rgba(9, 189, 15, 1) 3%, rgba(7, 198, 232, 1) 78%);
		color: var(--be-yellow);
		border: 2px dashed white;
    }
    
    div#demo_title > h1 { 
		font-size: 1.7vh; 
		line-height: 100%;
		margin: 0px;
	}
    
    img.widecard { width: 33ch; margin: 0.5ch; }
    
    .feed {display:flex;flex-direction:column;gap:12px}
    .feed .feed-controls{display:flex;gap:10px;align-items:center;justify-content:space-between}
    .select, .algo-select{padding:8px;border-radius:10px;border:1px solid rgba(0,0,0,0.06);background:white;font-family:var(--sans)}
    .feed-list{margin-top:12px;display:flex;flex-direction:column;gap:10px;max-height:460px;overflow:auto;padding-right:6px}
    
    .item {
		padding:12px;
		border-radius:10px;
		border:1px solid rgba(0,0,0,0.04);
		background:linear-gradient(180deg,#fff,#fff);
		display:flex;
		flex-direction:column;gap:8px
	}
    .item h4{
		margin:0;
		font-size:17px;
		letter-spacing: 0.1px;
		line-height: 110%;
		font-family:var(--serif);
		color:var(--be-red)
	}
    
    .meta{font-size:13px;color:var(--muted)}
    
    /* architecture block */
    .arch pre{background:#fff;border-radius:10px;padding:12px;border:1px dashed rgba(0,0,0,0.04);overflow:auto}
    
    /* footer */
    footer {
		margin-top:40px;
		padding:28px 0;
		border-top:1px solid rgba(0,0,0,0.03);
		display:flex;
		justify-content:space-between;
		align-items:center;
		gap:12px;
		font-size:14px
	}
    
    /* responsive */
    @media (max-width:980px){
      .hero{grid-template-columns:1fr; }
      .features{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:640px){
      .features{grid-template-columns:1fr}
      header{flex-direction:column;align-items:start;gap:12px}
      .feed {order:2}
    }
    
    .pill {
		display:inline-block;padding:6px 10px;border-radius:999px;background:var(--be-red);font-weight:700;font-size:13px
	}
    
    .muted {
		color:var(--muted);font-size:14px
	}
	
    .accent{
		color:var(--be-red);font-weight:700
	}
    
    h2, h3 {
		font-family:var(--serif);
		color:var(--be-red);
		margin-bottom:4px;
		margin-top: 0px;
		font-weight: 500;
		line-height: 110%;
	}

	.btn:hover {background:var(--be-blue); color: var(--be-yellow);}
	
	table {
		width: 100%;
	}
	
	tr {
		font-size: 94%;
	}
	
	th {
		border-bottom: 2px solid var(--muted);
		font-family: var(--serif);
		font-size:1.5vw;
		font-weight: 400;
		margin: 0px 0px 2px 0px;
		display: table-cell;
	}
	
	td {
		padding: .75em 1.5em;
		border-bottom: 1px solid var(--ink);
		text-align: left;
		margin: 0px;
		display: table-cell;
	}
	
	tt {
		background: #ddd;
		padding: .05vh;
		border-radius: 0.5em;
		font-size: .95vh;
		display: inline-block;
		line-height: inherit;
		}