:root{--bg:#ffce99;--card:#ffffff;--text:#111827;--accent:#0091e6;--header:#ff8000}

    *{box-sizing:border-box}

    header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}

    h1{margin:0;flex:1; min-width:0;}

    nav{display:flex;flex-wrap:wrap;gap:12px;}

    nav{display:flex;align-items:center;}

    .nav-toggle{display:none;}
    
    @media(max-width:520px){
	.nav-toggle{
		display:block;
		position:fixed;
		top:16px;
		right:16px;
		z-index:1000;
		padding:10px 14px;
		border:0;
		background:var(--accent);
		color:#fff;
		border-radius:10px;
		font-weight:700;
	}

 	header{padding-top:56px;} /* room for fixed button  */

 	nav{
		position:fixed;
		top:0;right:0;
		height:100vh;
		background:var(--card);
		box-shadow:-10px 0 25px rgba(16,24,40,0.18);
		padding:70px 16px 16px;
		transform:translateX(100%);
		transition:transform 0.2s ease;
		flex-direction:column;
		align-items:stretch;
		gap:14px;
		z-index:999;
		overflow:auto;
	}

	body.nav-open nav{transform:translateX(0);}

	nav a{
		margin-left:0;
		padding:10px 12px;
		border-radius:10px;
		text-align:center;
		background:var(--bg);
		text-direction:none;
	}

	nav a:hover{background:rgba(0,160,255,0.14);}
		
    }

    nav a{margin-left:0;white-space:nowrap}

    main .card{
	background:var(--card);
	color:var(--text);
	display:block;
	padding:20px;
	border-radius:10px;
	box-shadow:0 6px 18px rgba(16,24,40,.06);
	width:100%;
	max-width:100%;
    }

    footer{margin-top:18px;font-size:.9rem;color:#6b7280;text-align:right;}

    .btn{
	display:block;
	width:max-content;
	margin:0 auto;
	padding:8px 14px;
	background:var(--accent);
	color:#fff;
	border-radius:8px;
	text-decoration:none;
    }
    h2{color:var(--header);text-align:center;}
    html, body{overflow-x:hidden;background:var(--bg);margin:0;font-family:system-ui,-apple-system,Segoe UI, Roboto,"Helvetica Neue",Arial;color:var(--text);line-height:1.5}
    .container{max-width:900px;margin:40px auto;padding:10px;width:100%}
    @media (max-width:520px){
	.container{margin:0;padding:0 12px}
	h1{font-size:1.25rem}
	header{flex-wrap:wrap;gap:12px}
	nav{flex:0 0 100%;margin-top:6px}
	nav a{margin-left:0}
    }
	
.hamburger{
  display:block;
  width:22px;
  height:16px;
  position:relative;
  background:transparent;
}

.hamburger::before,
.hamburger::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px;
  background:#fff;
  border-radius:2px;
}

.hamburger::before{ top:0; }      /* top line */
.hamburger::after{ bottom:0; }    /* bottom line */

/* middle line */
.hamburger{
  box-shadow:none;
}

.hamburger span{display:none;}
.hamburger::marker{content:"";}
.hamburger{
  --mid:7px;
}
.hamburger{
  background-image: linear-gradient(#fff,#fff);
  background-repeat:no-repeat;
  background-size:100% 2px;
  background-position: 0 var(--mid);
}