@import url("//use.fontawesome.com/releases/v5.14.0/css/all.css");

:root{
	--bg:#05060a;
	--panel:#0b0d12;
	--muted:#8b93a4;
	--neon:#59ff9a;
	--accent:#00ffde;
	--glass: rgba(255,255,255,0.03);
	--radius:14px;
}

*{box-sizing:border-box}

html,body {
	width:100%;
	height:100%;
	background-color: #071018;	
}

body {
	margin: 0;
	top: 0;
	font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	background: linear-gradient(180deg,#020205 0%, #071018 60%);
	color:#e6eef6;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	overflow-x: hidden;
}


.wrap {
	margin: 0 auto;
	position:relative;
	width:100%;
	height:100vh;
	padding:28px;
}

header{
	display:flex;
	gap:16px;
	align-items:center;
	margin-bottom:18px;
}

div.logo {
	width:64px;
	height:64px;
	border-radius:12px;
	background:linear-gradient(135deg, rgba(89,255,154,0.12), rgba(0,255,222,0.07));
	border:1px solid rgba(89,255,154,0.12);
	display:flex;
	align-items:center;
	justify-content:center;
	font-family: "Share Tech Mono", monospace;
	font-size:18px;
	box-shadow:0 6px 30px rgba(0,0,0,0.6);
	color:var(--neon);
}

div.linewrap {
	padding: 10px 0px 15px 10px;
}

a.logo:link , a.logo:visited {
	color: var(--neon);
	text-decoration: none;
}

h1{font-family: "Share Tech Mono", monospace; margin:0; font-size:22px; letter-spacing:0.6px; color:var(--neon)}
p.lead{margin:0;color:var(--muted); font-size:13px}

main.grid{
	display:grid;
	grid-template-columns: 1fr 420px;
	gap:20px;
	margin-top:20px;
}

  .card{
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border:1px solid rgba(255,255,255,0.04);
    border-radius:var(--radius);
    padding:18px;
    box-shadow: 0 8px 30px rgba(2,6,23,0.6);
    backdrop-filter: blur(6px);
  }

  /* Left column elements */
  .task-meta{display:flex; gap:12px; align-items:center; margin-bottom:10px}
  .badge{
    font-family:"Share Tech Mono", monospace;
    background:rgba(89,255,154,0.06);
    color:var(--neon); padding:6px 8px; border-radius:8px; font-size:12px;
    border:1px solid rgba(89,255,154,0.06)
  }

  .steps{
    display:flex; flex-direction:column; gap:10px; margin-top:12px;
  }
  .step{
    display:flex; gap:12px; align-items:flex-start;
    background: linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.006));
    padding:12px; border-radius:10px;
    border:1px solid rgba(255,255,255,0.02);
  }
  .step .num{font-family:"Share Tech Mono", monospace; color:var(--accent); font-size:14px; width:34px; text-align:center}
  .step .content{font-size:13px; color:#dfe8f8}

  /* Right column */
  .resources{display:flex; flex-direction:column; gap:10px}
  .res-item{display:flex; flex-direction:column; gap:6px; padding:12px; border-radius:8px; border:1px dashed rgba(255,255,255,0.03); background:var(--glass)}
  .res-item a{color:var(--neon); text-decoration:none; font-family:"Share Tech Mono", monospace; font-size:13px}
  .res-item p{margin:0;color:var(--muted);font-size:12px}

  /* Code panel */
  pre.codebox{
    background:#02030a;
    border-radius:10px; padding:14px; overflow:auto; font-family: "Share Tech Mono", monospace;
    font-size:13px; color:#bdeac6; line-height:1.55; border:1px solid rgba(0,255,222,0.06);
  }

  /* faux terminal */
div.terminal{
background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25));
border-radius:10px;
padding:12px;
font-family:"Share Tech Mono", monospace;
color:var(--neon);
height:400px;
min-height:120px;
/*max-height:2000060px;*/
overflow:auto; border:1px solid rgba(89,255,154,0.06);
}
  .term-input{display:flex; gap:8px; margin-top:8px}
  .term-input input{
    flex:1; background:transparent; border:1px solid rgba(255,255,255,0.04); padding:8px 10px;
    color:var(--neon); border-radius:8px; outline:none; font-family:"Share Tech Mono", monospace;
  }
  .btn{
    background:transparent; border:1px solid rgba(255,255,255,0.06); padding:8px 12px; border-radius:8px;
    font-family:Inter; color:var(--neon); cursor:pointer;
  }
  footer{margin-top:18px; color:var(--muted); font-size:12px; display:flex; justify-content:space-between; gap:10px}

  /* responsive */
  @media (max-width:980px){
    main.grid{grid-template-columns:1fr; padding-bottom:40px}
    /*.wrap{padding:14px}*/
  }