:root {
  --blue:#4c8ac2;
  --sky:#4ab1df
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:#f3f4f5;
  color:#252a2d;
  font:15px Arial,sans-serif
}
.top-space {
  height:36px;
  background:#dceaf3
}
.exambar {
  height:40px;
  background:#303234;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
  font-size:12px
}
.exambar strong {
  color:#fff2a2
}
.exambar a {
  color:#fff;
  text-decoration:none
}
.exam-links {
  display:flex;
  align-items:center;
  gap:16px
}
.exambar .home-link {
  border:1px solid #ffffff80;
  border-radius:5px;
  padding:6px 10px
}
.top-grid {
  display:grid;
  grid-template-columns:1fr;
  background:#eee
}
.group {
  padding:7px 20px
}
.tag,.section-tag {
  display:inline-block;
  background:#4ab1df;
  color:white;
  padding:9px 18px;
  font-weight:bold
}
.userbox {
  grid-column:1;
  grid-row:1;
  justify-self:end;
  width:254px;
  background:#f8fbfd;
  display:flex;
  gap:14px;
  padding:8px;
  border-left:1px solid #ddd
}
.avatar {
  width:84px;
  height:84px;
  display:grid;
  place-items:center;
  background:#e4edf2;
  border:1px solid #bbb;
  font-size:46px;
  overflow:hidden;
  color:#4c8ac2;
  text-decoration:none
}
.avatar img {
  width:100%;
  height:100%;
  object-fit:cover
}
.username {
  font-size:20px;
  font-weight:bold;
  padding-top:5px
}
.sectionbar {
  height:38px;
  background:#fff;
  border-bottom:1px solid #d1d1d1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px 0 22px
}
.test-controls {
  min-height:42px;
  background:#f8fafb;
  padding:4px 12px;
}
.test-controls>div {
  display:flex;
  align-items:center;
  gap:8px;
}
.control-spacer { flex:1; }
.timer {
  display:flex;
  align-items:center;
  gap:8px
}
.timer select,.timer input {
  padding:5px;
  border:1px solid #aeb8bd;
  background:white
}
.timer input {
  width:75px
}
.keyboardbar {
  height:39px;
  background:var(--blue);
  color:white;
  font-size:17px;
  font-weight:bold;
  padding:9px 11px
}
.ad-slot {
  display:grid;
  place-items:center;
  border:1px dashed #aeb8bd;
  background:#f7f9fa;
  color:#687780;
  font-size:12px;
  text-align:center
}
.ad-slot[hidden] { display:none; }
.ad-slot-sidebar {
  width:160px;
  min-height:260px;
  margin:16px auto 0
}
.custom-count {
  margin:0;
  color:#50606a;
  font-size:12px
}
.workspace {
  margin:0 1px;
  background:#fff;
  border:1px solid #c8c8c8;
  min-height:calc(100vh - 203px);
  padding:7px;
  display:grid;
  grid-template-columns:clamp(105px,12vw,160px) minmax(0,1fr) clamp(130px,17vw,210px);
  grid-template-rows:auto 212px 210px auto auto;
  gap:9px 22px
}
.workspace.no-ads {
  grid-template-columns:minmax(0,1fr) minmax(220px,300px)
}
.workspace.no-ads .tools,
.workspace.no-ads .sample,
.workspace.no-ads .typing-wrap,
.workspace.no-ads .custom-panel,
.workspace.no-ads .actions {
  grid-column:1
}
.workspace.no-ads .side {
  grid-column:2
}
.tools {
  grid-column:2;
  grid-row:1;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap
}
.tools select,.tools input {
  padding:7px;
  border:1px solid #aeb8bd;
  background:#fff
}
.tools button {
  padding:7px 10px;
  font-size:12px
}
.sample,.typing {
  width:100%;
  height:100%;
  resize:vertical;
  padding:8px 10px;
  font:20px/1.43 Arial,sans-serif;
  white-space:pre-wrap;
  overflow:auto
}
.sample {
  grid-column:2;
  grid-row:2;
  border:1px solid #8e979c;
  color:#202326
}
.clipboard-limited .sample{user-select:none;-webkit-user-select:none}
.typing-wrap {
  position:relative;
  grid-column:2;
  grid-row:3;
  min-height:210px
}
.typing {
  position:absolute;
  inset:0;
  border:2px solid #343a3d;
  color:#202326;
  background:transparent;
  z-index:2
}
.typing.assistive {
  color:transparent;
  caret-color:#111;
  background:transparent
}
.mirror {
  position:absolute;
  inset:0;
  overflow:hidden;
  white-space:pre-wrap;
  overflow-wrap:break-word;
  padding:8px 10px;
  font:20px/1.43 Arial,sans-serif;
  color:#202326;
  pointer-events:none;
  z-index:1
}
.typing.assistive+.mirror {
  z-index:1
}
.wrong {
  color:#ba1a1a;
  background:#ffe1e1;
  text-decoration:underline;
  text-decoration-color:#ba1a1a
}
.side {
  grid-column:3;
  grid-row:1/6;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  margin:4px 8px 0 0;
  border:1px solid #b77cc2;
  border-radius:5px;
  padding:11px 14px;
  color:#454044;
  font-size:12px;
  line-height:1.8
}
.side p {
  margin:0 0 10px
}
.custom-panel {
  display:none;
  grid-column:2;
  grid-row:5;
  border:1px solid #a9c8d6;
  background:#f5fbfe;
  padding:12px;
  gap:8px
}
.custom-panel.open {
  display:grid
}
.custom-panel label {
  font-size:13px;
  font-weight:bold
}
.custom-panel input,.custom-panel textarea {
  width:100%;
  padding:8px;
  border:1px solid #aeb8bd;
  font:14px Arial
}
.custom-panel textarea {
  height:100px;
  resize:vertical
}
.button,.secondary {
  cursor:pointer;
  padding:9px 18px
}
.button {
  border:0;
  background:#4ab1df;
  color:#fff;
  font-size:16px
}
.secondary {
  border:1px solid #aeb8bd;
  background:#fff;
  color:#47545c
}
.actions {
  grid-column:2;
  grid-row:4;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:3px 4px
}
.sound {
  font-size:13px;
  display:flex;
  align-items:center;
  gap:6px
}
.sound input {
  accent-color:#4ab1df
}
.status {
  font-size:13px;
  color:#50606a;
  flex:1;
  min-width:200px
}
.submit {
  margin-left:auto
}
.footer {
  background:#627e8b;
  color:#fff;
  text-align:center;
  padding:5px;
  font-size:11px
}
.typing-ad-rail {
  grid-column:1;
  grid-row:1/6;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
}
.typing-ad-item {
  width:100%;
  min-height:200px;
  flex:1 1 200px;
}
.typing-ad-stack[hidden],.result-ad-stack[hidden]{display:none!important}
.result-ad-stack {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
  min-width:0;
}
.result-layout {
  grid-template-columns:clamp(105px,12vw,160px) minmax(0,1fr) clamp(130px,17vw,210px);
  gap:clamp(10px,1.5vw,20px);
}
.result-layout.no-ads {
  grid-template-columns:minmax(0,1fr)
}
.result-ad-slot {
  width:100%;
  min-height:180px;
  flex:1 1 180px;
}
.result-locked {
  margin:28px auto;
  max-width:650px;
  padding:28px;
  text-align:center;
  border:1px solid #9bbbd0;
  border-radius:12px;
  background:#f4faff;
}
.result-locked h2 { margin:0 0 10px; color:#244f70; }
.result-locked p { line-height:1.6; }
.result-locked[hidden] { display:none; }

@media(max-width:640px) {
  .top-grid {
  grid-template-columns:1fr
}
.userbox {
  grid-column:1;
  grid-row:1;
  width:100%;
  border:0;
  border-top:1px solid #ddd
}
.workspace {
  grid-template-columns:1fr;
  grid-template-rows:auto 190px 190px auto auto auto auto;
  gap:9px;
  min-height:auto
}
.tools,.sample,.typing-wrap,.custom-panel,.side,.actions,.typing-ad-rail {
  grid-column:1;
  grid-row:auto
}
.typing-ad-item { min-height:180px; }
.side {
  margin:8px 0
}
.ad-slot-sidebar {
  min-height:250px;
  width:min(100%,300px);
  margin:16px auto 0
}
.result-layout { grid-template-columns:1fr; }
.result-ad-slot { width:min(100%,300px); min-height:180px; }
.sectionbar {
  padding-left:10px
}
.timer {
  font-size:12px
}
.exam-links { gap:8px; }
.exambar .home-link { padding:5px 7px; }
.typing-wrap {
  height:190px
}

}

.exambar .site-brand{position:static;display:block;flex:0 0 auto;width:42px;height:42px;overflow:hidden;border-radius:50%;background:#fff;line-height:0}
.exambar .site-brand img{position:static;display:block;width:100%;max-width:100%;height:100%;object-fit:contain;transform:none}