:root{
  --row1-bg:#978f8f;   
  --row2-bg:#f5f597;   
  --row1-fg:#ffffff;   
  --row2-fg:#1a1a1a;
}

*{ box-sizing:border-box; }
body{
  margin:24px;
  font:16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:#1a1a1a;
}


table.variant7{
  width:100%;
  max-width:980px;
  border-collapse:collapse;
  table-layout:fixed;
  border:3px solid #444;
  margin-bottom:28px;
}
.variant7 td{
  border:2px solid #444;
  height:64px;
  padding:8px 10px;
  vertical-align:middle;
}
.center{ text-align:center; }


.variant7 .row-1 td{ background:var(--row1-bg); color:var(--row1-fg); }
.variant7 .row-1:hover td{ background:var(--row2-bg); color:var(--row2-fg); }

.variant7 .row-2 td{ background:var(--row2-bg); color:var(--row2-fg); }
.variant7 .row-2:hover td{ background:var(--row1-bg); color:var(--row1-fg); }


.variant7 .big-left{ height:160px; }
.variant7 .wide-left{ height:90px; }
.variant7 .tall-right{ height:130px; }
.variant7 .small{ height:70px; }


.cell-content{
  display:flex;
  height:100%;
  width:100%;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  text-align:center;
}
.cell-content .pi{ font-weight:700; font-size:20px; }
.cell-content .role{ font-weight:600; opacity:.95; }


.variant7 tr:nth-of-type(n+3) td{ background:#f7f7f7; }


.task2{ display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start; }
.clock-wrap{ display:flex; flex-direction:column; gap:8px; align-items:center; }
.clock-wrap figcaption{ font-weight:600; }

.clock{
  position:relative;
  width:220px;
  height:220px;
  border-radius:24px;
  border:3px solid #2b2b2b;
  background:#efefef;
  box-shadow:0 4px 14px rgba(0,0,0,.08) inset;
}


.clock .hand{
  position:absolute;
  left:50%;
  top:50%;
  transform-origin:50% 100%;
  background:#111;
}
.clock .hand.hour{
  width:10px; height:90px;
  transform:translate(-50%,-100%) rotate(0deg);  
  border-radius:8px;
}
.clock .hand.minute{
  width:10px; height:65px;
  transform:translate(-50%,-100%) rotate(90deg); 
  border-radius:8px;
}
.clock .dot{
  position:absolute;
  width:22px; height:22px;
  border-radius:50%;
  background:#e02020;
  box-shadow:0 0 0 2px #7a0d0d inset;
}


.clock-pos .dot-top   { left:50%; top:16px;  transform:translateX(-50%); }
.clock-pos .dot-bottom{ left:50%; bottom:16px;transform:translateX(-50%); }
.clock-pos .dot-left  { left:22px;  top:50%;  transform:translateY(-50%); }
.clock-pos .dot-right { right:22px; top:50%;  transform:translateY(-50%); }


.clock-transform .dot{
  left:50%; top:50%;
  transform-origin:0 0;
}
.clock-transform .at-0   { transform:rotate(  -7deg) translate(0,-90px); }
.clock-transform .at-90   { transform:rotate( 83deg) translate(0,-90px); }
.clock-transform .at-180 { transform:rotate(170deg) translate(0,-90px); }
.clock-transform .at-270 { transform:rotate(260deg) translate(0,-90px); }