:root{
	/* Playful “blue gadget” palette (no official assets) */
	--md-sky:#D9F1FF;
	--md-sky2:#A9DBFF;
	--md-blue:#1677FF;
	--md-blue2:#0B56D6;
	--md-red:#FF3B30;
	--md-yellow:#FFD400;
	--md-ink: rgba(9,16,28,.92);

	--md-bg0: var(--md-sky);
	--md-bg1: #F7FCFF;
	--md-surface: rgba(255,255,255,.78);
	--md-surface2: rgba(255,255,255,.92);
	--md-border: rgba(9,16,28,.14);
	--md-text: var(--md-ink);
	--md-muted: rgba(9,16,28,.70);
	--md-dim: rgba(9,16,28,.56);
	--md-accent: var(--md-blue);
	--md-accent2: var(--md-yellow);
	--md-warn:#F59E0B;
	--md-danger:#EF4444;
	--md-shadow: 0 18px 0 rgba(9,16,28,.10), 0 24px 50px rgba(9,16,28,.12);
	--md-radius: 18px;
	--md-radius2: 26px;
	--md-max: 1100px;
	--md-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Comic Sans MS", Arial, sans-serif;
}

/* keep light palette for both modes */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.md-body{
	margin:0;
	font-family:var(--md-font);
	color:var(--md-text);
	background:
		radial-gradient(140px 90px at 12% 18%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%),
		radial-gradient(180px 110px at 28% 12%, rgba(255,255,255,.92), rgba(255,255,255,0) 72%),
		radial-gradient(220px 120px at 78% 16%, rgba(255,255,255,.92), rgba(255,255,255,0) 74%),
		radial-gradient(260px 140px at 88% 30%, rgba(255,255,255,.86), rgba(255,255,255,0) 75%),
		linear-gradient(180deg, var(--md-bg0), var(--md-bg1));
	min-height:100vh;
}

a{color:inherit}
:where(a, button, input, textarea, select):focus-visible{
	outline: 2px solid color-mix(in srgb, var(--md-accent) 70%, #fff 0%);
	outline-offset: 3px;
}
.md-skipLink{
	position:absolute;
	left:-9999px;
	top:auto;
	width:1px;height:1px;
	overflow:hidden;
}
.md-skipLink:focus{
	left:16px;top:16px;
	width:auto;height:auto;
	padding:10px 12px;
	background:var(--md-surface2);
	border:1px solid var(--md-border);
	border-radius:12px;
	box-shadow:var(--md-shadow);
	z-index:9999;
}

.md-header{
	position:sticky;
	top:0;
	z-index:50;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	background: color-mix(in srgb, var(--md-surface2) 82%, transparent);
	border-bottom: 3px solid color-mix(in srgb, var(--md-blue) 35%, var(--md-border));
}
.md-header__inner{
	max-width: var(--md-max);
	margin:0 auto;
	padding:14px 18px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
}
.md-header__right{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:12px;
	flex-wrap:wrap;
}
.md-brand__link{
	display:flex;
	align-items:center;
	gap:12px;
	text-decoration:none;
}
.md-brand__mark{
	width:14px;height:14px;
	border-radius:999px;
	background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.2) 40%, var(--md-blue) 75%);
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--md-blue) 18%, transparent);
}
.md-brand__text{display:flex; flex-direction:column; gap:2px}
.md-brand__title{font-weight:700; letter-spacing:.2px; font-size:14px}
.md-brand__tag{font-size:12px; color:var(--md-dim)}

.md-nav__list{
	display:flex;
	align-items:center;
	gap:10px;
	list-style:none;
	margin:0;padding:0;
	flex-wrap:wrap;
	justify-content:flex-end;
}
.md-nav__link{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:10px 12px;
	text-decoration:none;
	border-radius:999px;
	border:2px solid transparent;
	color:var(--md-muted);
	transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.md-nav__link:hover{
	color:var(--md-text);
	background: var(--md-surface2);
	border-color: color-mix(in srgb, var(--md-blue) 28%, var(--md-border));
	transform: translateY(-1px);
}
.md-nav__item.is-current .md-nav__link{
	color:var(--md-text);
	background: color-mix(in srgb, var(--md-blue) 14%, var(--md-surface2));
	border-color: color-mix(in srgb, var(--md-blue) 55%, var(--md-border));
}
.md-nav__icon{
	width:18px;height:18px;
	border-radius:999px;
	border:2px solid color-mix(in srgb, var(--md-ink) 26%, transparent);
	background: var(--md-surface2);
	display:inline-flex;
	align-items:center;
	justify-content:center;
	position:relative;
}
.md-nav__icon::before,
.md-nav__icon::after{
	content:'';
	position:absolute;
	border-radius:999px;
	border:2px solid color-mix(in srgb, var(--md-ink) 60%, transparent);
}
.md-nav__icon--portal::before{
	width:9px;height:9px;
	border-radius:3px;
}
.md-nav__icon--time-machine::before{
	width:10px;height:10px;
	border-radius:999px;
}
.md-nav__icon--maze::before{
	width:9px;height:9px;
	border-radius:3px;
	border-top:none;
	border-left:none;
}
.md-nav__icon--bamboo::before{
	width:3px;height:10px;
	border-radius:999px;
	border-right:none;
}
.md-nav__text{
	font-size:13px;
}

.md-main{
	max-width: var(--md-max);
	margin: 0 auto;
	padding: 18px;
}

.md-auth{
	margin: 20px 0 50px;
}
.md-auth__panel{
	max-width: 720px;
	margin: 0 auto;
	background: var(--md-surface2);
	border: 2px solid color-mix(in srgb, var(--md-ink) 12%, transparent);
	border-radius: var(--md-radius2);
	box-shadow: var(--md-shadow);
	padding: 28px 24px 24px;
}
.md-auth__head{
	text-align: center;
	margin-bottom: 24px;
}
.md-auth__head .md-eyebrow{
	margin-bottom: 6px;
}
.md-auth__title{
	margin: 0 0 8px;
	font-size: clamp(22px, 3.2vw, 28px);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--md-text);
}
.md-auth__lead{
	margin: 0;
	font-size: 14px;
	color: var(--md-muted);
	line-height: 1.6;
}
.md-auth__forms{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: start;
}
.md-auth__card{
	background: #fff;
	border: 2px solid color-mix(in srgb, var(--md-sky2) 80%, transparent);
	border-radius: var(--md-radius);
	box-shadow: 0 6px 0 rgba(9,16,28,.06);
	padding: 20px 18px;
}
.md-auth__cardTitle{
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 700;
	color: var(--md-text);
}
.md-auth__form{
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.md-auth__field{
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.md-auth__label{
	font-size: 13px;
	font-weight: 600;
	color: var(--md-muted);
}
.md-auth__input{
	width: 100%;
	padding: 10px 12px;
	border-radius: 12px;
	border: 2px solid color-mix(in srgb, var(--md-ink) 14%, transparent);
	background: var(--md-surface2);
	color: var(--md-text);
	font-size: 14px;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.md-auth__input::placeholder{
	color: var(--md-dim);
}
.md-auth__input:focus{
	border-color: var(--md-sky2);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--md-blue) 14%, transparent);
}
.md-auth__remember{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--md-muted);
	cursor: pointer;
}
.md-auth__remember input{margin: 0}
.md-auth__submit{
	width: 100%;
	margin-top: 4px;
	padding: 12px 14px;
}
.md-auth__foot{
	margin-top: 20px;
	text-align: center;
}
.md-auth__foot .md-btn{
	min-width: 120px;
}

.md-section{
	margin: 26px 0 40px;
}
.md-section__head{
	margin-bottom: 16px;
}
.md-eyebrow{
	margin:0 0 8px;
	font-size:12px;
	letter-spacing:.28em;
	text-transform:uppercase;
	color: var(--md-dim);
}
.md-h1{
	margin:0 0 10px;
	font-size: clamp(26px, 4vw, 44px);
	line-height:1.08;
	letter-spacing:-.02em;
}
.md-h2{
	margin:0 0 10px;
	font-size: clamp(22px, 3vw, 34px);
	line-height:1.12;
	letter-spacing:-.02em;
}
.md-h3{
	margin:0 0 8px;
	font-size: clamp(18px, 2.3vw, 22px);
	line-height:1.2;
}
.md-h4{
	margin:0 0 8px;
	font-size: 16px;
}
.md-lead{
	margin:0;
	color: var(--md-muted);
	font-size: 15px;
	line-height:1.7;
}
.md-p{
	margin: 10px 0 0;
	line-height:1.8;
	color: var(--md-muted);
}
.md-muted{color:var(--md-dim); margin:10px 0 0; line-height:1.7}

.md-card{
	background: var(--md-surface);
	border:2px solid color-mix(in srgb, var(--md-ink) 25%, transparent);
	border-radius: var(--md-radius);
	box-shadow: var(--md-shadow);
	padding: 18px;
}

.md-feed{
	display:grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
.md-postCard{
	background: var(--md-surface);
	border:1px solid var(--md-border);
	border-radius: var(--md-radius);
	box-shadow: var(--md-shadow);
	overflow:hidden;
}
.md-postCard__link{
	display:block;
	padding: 16px;
	text-decoration:none;
}
.md-postCard__title{margin:0 0 6px}
.md-postCard__meta{margin:0 0 10px; color: var(--md-dim); font-size: 12px}
.md-postCard__excerpt :where(p){margin:0; color: var(--md-muted); line-height:1.8}
.md-pagination .page-numbers{
	display:inline-flex;
	gap:8px;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
}
.md-pagination a, .md-pagination span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid var(--md-border);
	background: var(--md-surface);
	color: var(--md-muted);
	text-decoration:none;
}
.md-pagination .current{
	background: color-mix(in srgb, var(--md-accent) 14%, var(--md-surface));
	color: var(--md-text);
	border-color: color-mix(in srgb, var(--md-accent) 34%, var(--md-border));
}

.md-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	padding: 11px 14px;
	border-radius: 999px;
	text-decoration:none;
	border:2px solid color-mix(in srgb, var(--md-ink) 35%, transparent);
	background: transparent;
	color: var(--md-text);
	cursor:pointer;
	font-weight: 650;
	letter-spacing:.1px;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.md-btn:hover{transform: translateY(-2px)}
.md-btn:active{transform: translateY(0)}
.md-btn--primary{
	background: linear-gradient(180deg, #B8E4FF, #8FD4FF);
	border-color: color-mix(in srgb, var(--md-blue) 45%, transparent);
	box-shadow: 0 6px 0 color-mix(in srgb, var(--md-blue) 25%, transparent), 0 12px 24px rgba(9,16,28,.12);
	color: #0B56D6;
}
.md-btn--ghost{
	background: var(--md-surface2);
}

.md-page{margin: 10px 0 50px}
.md-page__inner{
	background: color-mix(in srgb, var(--md-surface) 82%, transparent);
	border: 1px solid var(--md-border);
	border-radius: var(--md-radius2);
	box-shadow: var(--md-shadow);
	padding: 18px;
}
.md-page__head{margin-bottom:12px}
.md-prose :where(p, ul, ol){line-height:1.9; color: var(--md-muted)}
.md-prose :where(h2, h3){color: var(--md-text)}
.md-prose a{color: color-mix(in srgb, var(--md-accent) 78%, var(--md-text))}
.md-prose img{max-width:100%; height:auto; border-radius: 14px; border:1px solid var(--md-border)}

.md-portal{
	padding: 10px 0 18px;
}
.md-portal__grid{
	display:grid;
	grid-template-columns: 1.25fr .75fr;
	gap: 16px;
	align-items: stretch;
}
.md-portal__card{
	background: linear-gradient(180deg, color-mix(in srgb, var(--md-surface) 92%, transparent), color-mix(in srgb, var(--md-surface2) 45%, transparent));
	border: 1px solid var(--md-border);
	border-radius: var(--md-radius2);
	box-shadow: var(--md-shadow);
	padding: 22px;
	position:relative;
	overflow:hidden;
}
.md-portal__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.md-portal__photo{
	border-radius: var(--md-radius2);
	border: 2px solid color-mix(in srgb, var(--md-ink) 15%, transparent);
	background: var(--md-surface2);
	box-shadow: var(--md-shadow);
	min-height: 260px;
	padding: 16px 16px 14px;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}
.md-portal__frame{
	position:relative;
	border-radius: 26px;
	border: 2px solid color-mix(in srgb, var(--md-blue) 35%, var(--md-border));
	background:
		radial-gradient(140px 120px at 30% 40%, rgba(255,255,255,.96), rgba(255,255,255,0) 70%),
		linear-gradient(145deg, color-mix(in srgb, var(--md-sky2) 70%, #fff), color-mix(in srgb, var(--md-blue) 40%, #fff));
	box-shadow: 0 14px 0 rgba(9,16,28,.06);
	min-height: 190px;
	overflow:hidden;
}
.md-portal__avatar{
	position:absolute;
	bottom:18px;
	width:82px;height:82px;
	border-radius:999px;
	background: #fff;
	border: 3px solid color-mix(in srgb, var(--md-ink) 22%, transparent);
	box-shadow: 0 8px 0 rgba(9,16,28,.10);
}
.md-portal__avatar--left{
	left:34px;
	background:
		radial-gradient(circle at 40% 32%, #fff, #FFECEC 52%, rgba(255,255,255,0) 72%),
		linear-gradient(180deg, #FFB3B3, #FF6B6B);
}
.md-portal__avatar--right{
	left:108px;
	background:
		radial-gradient(circle at 40% 32%, #fff, #E4F3FF 52%, rgba(255,255,255,0) 72%),
		linear-gradient(180deg, #6EC5FF, #1677FF);
}
.md-portal__spark{
	position:absolute;
	top:24px; right:24px;
	width: 18px; height: 18px;
	border-radius:999px;
	background: var(--md-yellow);
	border: 2px solid color-mix(in srgb, var(--md-ink) 20%, transparent);
	box-shadow: 0 0 0 6px rgba(255,212,0,.35);
}
.md-portal__caption{
	margin: 10px 4px 0;
	font-size: 12px;
	color: var(--md-dim);
}

.md-portal__stripWrap{
	margin-top: 28px;
}
.md-portal__stripHead{
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	color: var(--md-dim);
	letter-spacing: .1em;
}
.md-portal__strip{
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding: 4px 0 12px;
	-webkit-overflow-scrolling: touch;
}
.md-portal__strip::-webkit-scrollbar{
	height: 6px;
}
.md-portal__strip::-webkit-scrollbar-thumb{
	background: color-mix(in srgb, var(--md-ink) 20%, transparent);
	border-radius: 999px;
}
.md-portal__stripItem{
	flex: 0 0 200px;
	scroll-snap-align: start;
	background: var(--md-surface2);
	border: 2px solid color-mix(in srgb, var(--md-ink) 12%, transparent);
	border-radius: var(--md-radius);
	box-shadow: var(--md-shadow);
	overflow: hidden;
}
.md-portal__stripImg{
	height: 120px;
	background: linear-gradient(145deg, color-mix(in srgb, var(--md-sky2) 60%, #fff), color-mix(in srgb, var(--md-blue) 25%, #fff));
	background-size: cover;
	background-position: center;
}
.md-portal__stripCap{
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.md-portal__stripTitle{
	font-weight: 700;
	font-size: 14px;
	color: var(--md-text);
}
.md-portal__stripText{
	font-size: 12px;
	color: var(--md-muted);
}
.md-portal__intro{
	margin-top: 28px;
	padding: 20px 18px;
	background: color-mix(in srgb, var(--md-surface) 70%, transparent);
	border: 2px solid color-mix(in srgb, var(--md-ink) 10%, transparent);
	border-radius: var(--md-radius2);
}
.md-portal__introLine{
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--md-muted);
}
.md-portal__introLine:last-of-type{
	margin-bottom: 14px;
}
.md-portal__introLinks{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.md-bgm{
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 55;
}
.md-bgm__btn{
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 2px solid color-mix(in srgb, var(--md-ink) 22%, transparent);
	background: var(--md-surface2);
	box-shadow: var(--md-shadow);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .15s ease, background .15s ease;
}
.md-bgm__btn:hover{
	background: color-mix(in srgb, var(--md-sky2) 50%, var(--md-surface2));
	transform: scale(1.05);
}
.md-bgm__icon{
	position: absolute;
}
.md-bgm__icon--play{
	width: 0;
	height: 0;
	border-left: 10px solid var(--md-ink);
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	margin-left: 4px;
}
.md-bgm__icon--pause{
	width: 6px;
	height: 14px;
	background: var(--md-ink);
	box-shadow: 8px 0 0 var(--md-ink);
	border-radius: 2px;
	display: none;
}
.md-bgm.is-playing .md-bgm__icon--play{
	display: none;
}
.md-bgm.is-playing .md-bgm__icon--pause{
	display: block;
}

.md-timeline{
	list-style:none;
	margin: 14px 0 0;
	padding: 0;
	display:flex;
	flex-direction:column;
	gap: 12px;
}
.md-timeline__item{
	display:grid;
	grid-template-columns: 34px 1fr;
	gap: 12px;
	align-items: start;
}
.md-timeline__badge{
	width:34px;height:34px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--md-accent) 18%, var(--md-surface));
	border:1px solid color-mix(in srgb, var(--md-accent) 35%, var(--md-border));
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight: 800;
}
.md-timeline__body{
	background: var(--md-surface);
	border:1px solid var(--md-border);
	border-radius: var(--md-radius);
	padding: 14px 14px 16px;
}
.md-timeline__time{
	color: var(--md-dim);
	font-size: 12px;
}

.md-photoCard{margin-top:10px}
.md-photoCard__ph{
	height: 180px;
	border-radius: 14px;
	border: 1px dashed color-mix(in srgb, var(--md-border) 75%, transparent);
	background:
		radial-gradient(400px 240px at 30% 30%, rgba(139,92,246,.18), transparent 60%),
		radial-gradient(300px 240px at 80% 60%, rgba(34,197,94,.12), transparent 65%),
		linear-gradient(180deg, color-mix(in srgb, var(--md-surface2) 60%, transparent), color-mix(in srgb, var(--md-surface) 60%, transparent));
}
.md-photoCard__cap{
	margin-top: 8px;
	font-size: 12px;
	color: var(--md-dim);
}

.md-quiz{margin-top: 12px}
.md-quiz__progress{
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--md-dim);
}
.md-quiz__stepsWrap{
	position: relative;
	min-height: 130px;
}
.md-quiz__page{
	display:none;
}
.md-quiz__page.is-active{
	display:block;
	animation: mdStepIn .2s ease-out;
}
@keyframes mdStepIn{
	from{opacity:0; transform:translateY(4px)}
	to{opacity:1; transform:translateY(0)}
}
.md-quiz__grid{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.md-q{
	background: var(--md-surface);
	border:1px solid var(--md-border);
	border-radius: var(--md-radius);
	padding: 12px 12px 14px;
	margin:0;
}
.md-q__title{
	font-weight: 760;
	line-height:1.4;
	margin: 0 0 8px;
}
.md-opt{
	display:flex;
	gap: 10px;
	align-items:flex-start;
	padding: 8px 8px;
	border-radius: 12px;
	color: var(--md-muted);
	border: 1px solid transparent;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.md-opt:hover{
	background: color-mix(in srgb, var(--md-surface2) 60%, transparent);
	border-color: var(--md-border);
	color: var(--md-text);
}
.md-opt input{margin-top: 3px}
.md-quiz__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px}
.md-quiz__email{margin-top: 12px}
.md-quiz__result{
	margin-top: 12px;
	background: color-mix(in srgb, var(--md-accent) 10%, var(--md-surface));
	border: 1px solid color-mix(in srgb, var(--md-accent) 30%, var(--md-border));
	border-radius: var(--md-radius2);
	padding: 16px;
}
.md-steps{margin: 8px 0 0; padding-left: 18px}
.md-steps li{color: var(--md-muted); line-height:1.9}

.md-twoCol{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.md-list{margin: 10px 0 0; padding-left: 18px}
.md-list li{color: var(--md-muted); line-height:1.9; margin: 4px 0}
.md-divider{height:1px; background: var(--md-border); margin: 14px 0}

.md-form{display:flex; flex-direction:column; gap: 10px}
.md-field{display:flex; flex-direction:column; gap: 6px}
.md-field__label{font-size: 13px; color: var(--md-dim)}
.md-input, .md-textarea{
	width: 100%;
	padding: 10px 12px;
	border-radius: 14px;
	border:1px solid var(--md-border);
	background: color-mix(in srgb, var(--md-surface) 80%, transparent);
	color: var(--md-text);
	outline: none;
}
.md-input:focus, .md-textarea:focus{
	border-color: color-mix(in srgb, var(--md-accent) 55%, var(--md-border));
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--md-accent) 18%, transparent);
}

.md-alert{
	padding: 10px 12px;
	border-radius: 14px;
	border: 1px solid var(--md-border);
	margin-bottom: 10px;
	color: var(--md-text);
}
.md-alert--ok{
	background: color-mix(in srgb, var(--md-accent2) 14%, var(--md-surface));
	border-color: color-mix(in srgb, var(--md-accent2) 32%, var(--md-border));
}
.md-alert--err{
	background: color-mix(in srgb, var(--md-danger) 14%, var(--md-surface));
	border-color: color-mix(in srgb, var(--md-danger) 30%, var(--md-border));
}

.md-footer{
	margin-top: 34px;
	border-top: 1px solid var(--md-border);
	background: color-mix(in srgb, var(--md-bg0) 60%, transparent);
}
.md-footer__inner{
	max-width: var(--md-max);
	margin: 0 auto;
	padding: 22px 18px;
	display:grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 16px;
}
.md-footer__title{margin:0 0 8px; font-weight: 800}
.md-footer__text{margin:0; color: var(--md-muted); line-height:1.8}
.md-footer__list{margin:0; padding-left: 18px}
.md-footer__list li{margin: 6px 0}
.md-footer__list a{color: var(--md-muted); text-decoration-thickness: 1px; text-underline-offset: .2em}
.md-footer__list a:hover{color: var(--md-text)}
.md-footer__bar{
	border-top:1px solid var(--md-border);
	padding: 12px 18px;
	color: var(--md-dim);
	font-size: 12px;
	text-align:center;
}

.md-fab{
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 60;
}
.md-fab__btn{
	display:flex;
	align-items:center;
	gap:10px;
	padding: 10px 12px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--md-accent) 35%, var(--md-border));
	background: color-mix(in srgb, var(--md-surface) 86%, transparent);
	box-shadow: var(--md-shadow);
	text-decoration:none;
	color: var(--md-text);
	transition: transform .15s ease, background .15s ease;
}
.md-fab__btn:hover{transform: translateY(-1px); background: color-mix(in srgb, var(--md-accent) 10%, var(--md-surface))}
.md-fab__dot{
	width: 10px; height: 10px;
	border-radius: 999px;
	background: radial-gradient(circle at 35% 35%, #fff, color-mix(in srgb, var(--md-accent) 90%, #fff));
	box-shadow: 0 0 0 6px rgba(139,92,246,.12);
}
.md-fab__txt{font-weight: 800; letter-spacing:.2px; font-size: 13px}

@media (max-width: 860px){
	.md-header__inner{padding: 12px 14px}
	.md-main{padding: 14px}
	.md-portal__grid{grid-template-columns: 1fr}
	.md-quiz__grid{grid-template-columns: 1fr}
	.md-twoCol{grid-template-columns: 1fr}
	.md-footer__inner{grid-template-columns: 1fr}
	.md-auth__panel{padding: 20px 16px}
	.md-auth__forms{grid-template-columns: 1fr}
}